引导程序4使文本在图像周围浮动

Question

我正在尝试使文本浮动在图像周围，并进行了研究，发现之前曾问过此问题，但是，我确实尝试了他们的代码，但仍然无法正常工作。我将代码粘贴到下面，任何人都可以看看并给我一些建议。网格系统是否将图像包装器分成两个独立的部分，从而停止了图像周围的文本包装器。如何使文字像照片一样漂浮在图像周围。

<div class="container text-section">
    <div class="row">
        <div class='float-left col-md-4'>
            <img src="./assets/img/img6.jpeg" alt="img" width='100%'>
        </div>
        <div class='col-md-8'>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa.
                Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                ultricies nec,
                pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
                fringilla vel,
                aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
                dictum felis
                eu pede
                mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend
                tellus.
                Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
                dapibus in,
                viverra quis, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                eget dolor.
                Aenean massa.
                Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                ultricies nec,
                pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
                fringilla vel,
                aliquet nec,
                feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
            </p>
        </div>
    </div>
</div>

Answer 1

使用行和列时，您不会浮动，因为列始终设置宽度。

摆脱这种情况，将图像和文本合并在一起（我插入了一个虚拟图像，以便您可以实际看到东西）：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container text-section">
  <div class="float-left">
    <img src="https://dummyimage.com/300x200" alt="img"> 
  </div>
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa.
                Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                ultricies nec,
                pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
                fringilla vel,
                aliquet nec,
                vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
                dictum felis
                eu pede
                mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean
                vulputate eleifend
                tellus.
                Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
                dapibus in,
                viverra quis, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                eget dolor.
                Aenean massa.
                Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                ultricies nec,
                pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
                fringilla vel,
                aliquet nec,
                feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                Aenean massa.
                Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
  </p>
</div>