загрузчик 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>