如何使用Bootstrap 4使文本环绕图像而没有浮动？

Question

我需要用bootstrap 4 wihout floats使图像环绕图像，这可能吗？

这是我的代码：

<article class="row single-post mt-5 no-gutters">
       <div class="image-wrapper col-md-6">
          <?php the_post_thumbnail(); ?>
        </div>
        <div class="single-post-content-wrapper p-3">
          <?php the_content(); ?>
        </div>
  </article>

这是我现在拥有的：

这是我需要具备的：

Answer 1

我需要用bootstrap 4 wihout floats使图像环绕图像，这可能吗？

不可以，在这种情况下，您必须使用float-left图像的类。但是您不必为该图像使用任何包装。您可以完全摆脱该包装器div并将类添加到映像中。

您绝对必须做的另一件事：

将所有内容放入Bootstrap列，因为只有Bootstrap列可能是Bootstrap行的直接子代。

这是一个工作代码段（请注意：我在其中保留了图像包装div，但我建议您将其删除，因为那完全是不必要的代码。将类直接添加到图像中）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    
<div class="container">
    <article class="row single-post mt-5 no-gutters">
        <div class="col-md-6">
            <div class="image-wrapper float-left pr-3">
                <img src="https://placeimg.com/150/150/animals" alt="">
            </div>
            <div class="single-post-content-wrapper p-3">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
                <br><br>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
            </div>
        </div>
    </article>
</div>