如何使用Bootstrap 4使文本环绕图像而没有浮动? [英] How to make text wrap around image with bootstrap 4 without float?

问题描述

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

I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?

这是我的代码:

<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>

这是我现在拥有的:

这是我需要具备的条件:

Here what I need to have:

推荐答案

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

I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?

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

No, in this case, you must use the float-left class for the image. But you don't have to use any wrapper for the image. You can get rid of that wrapper div entirely and add your classes to the image.

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

Another thing you absolutely must do:

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

Put all of your content into Bootstrap columns because only Bootstrap columns may be the direct children of Bootstrap rows.

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

Here's a working code snippet (note: I left the image wrapper div in there but I recommend you get rid of it because that's totally unnecessary code. Add your classes directly to the image):

<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>

这篇关于如何使用Bootstrap 4使文本环绕图像而没有浮动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！