How to make text wrap around image with bootstrap 4 without float?

问题

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:

回答1:

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>

回答2:

<div class="row">
  <div class="col-lg-2 col-12">
    <div class="icon mb-4 text-center"><i class="fa fa-github"></i></div>
  </div>
<div class="col-10">
    <h4 class="h4">Title</h4>
    <p class="text-muted">Some text here</p>
</div>

I have used this in bootstrap 4.

回答3:

Why don't you use something like this:

<div class="container">
  <img src="img/example.png" align="left" width="50%">
  <p>Text here</p>
</div>

Simpe

align="left"

will do the job!

来源：https://stackoverflow.com/questions/49225505/how-to-make-text-wrap-around-image-with-bootstrap-4-without-float

标签

wordpress

bootstrap-4

word-wrap