如何在没有浮动的情况下使用引导程序 4 使文本环绕图像? [英] How to make text wrap around image with bootstrap 4 without float?

问题描述

我需要使用 bootstrap 4 使文字环绕图像而没有浮动，这可能吗?

这是我的代码:

这是我需要的:
解决方案
我需要使用 bootstrap 4 使文字环绕图像而没有浮动，这可能吗?
不，在这种情况下，您必须对图像使用 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="容器"><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 class="single-post-content-wrapper p-3">Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Nihil ad, ex eaque fuga 减去 reprehenderit asperiores earum incidunt.Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.<br><br>Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.Nihil ad, ex eaque fuga 减去 reprehenderit asperiores earum incidunt.Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.

</文章>

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

Here my code:

<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 have now:

Here what I need to have:

解决方案

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

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:

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

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>

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