플로팅 없이 부트스트랩 4로 텍스트 랩 어라운드 이미지를 만드는 방법은?

플로팅 없이 부트스트랩 4로 텍스트 랩 어라운드 이미지를 만드는 방법은?

플로트가 없는 부트스트랩 4로 텍스트 랩어라운드 이미지를 만들어야 하는데 가능한가요?

여기 내 코드:

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

지금 제가 가지고 있는 것은 다음과 같습니다.

필요한 것은 다음과 같습니다.

플로트가 없는 부트스트랩 4로 텍스트 랩어라운드 이미지를 만들어야 하는데 가능한가요?

아니요, 이 경우에는float-left이미지에 대한 클래스입니다.하지만 이미지는 포장지를 사용하지 않아도 됩니다.그 포장지 디브를 완전히 없애고 당신의 클래스를 이미지에 추가할 수 있습니다.

당신이 꼭 해야 할 또 다른 일:

부트스트랩 열만 부트스트랩 행의 직접 자식일 수 있으므로 모든 내용을 부트스트랩 열에 넣습니다.

여기 작동 코드 조각이 있습니다. (참고: 이미지 포장지 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>

부트스트랩 5.0용으로 업데이트됨

<div class="container">
  <article class="row  mt-5 no-gutters">
      <div class="col-md-6">
          <div class="image-wrapper float-start pe-4 ">
              <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 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>

저는 이것을 부트스트랩 4에 사용한 적이 있습니다.

이런 것을 사용해 보는 건 어떨까요?

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

심프

align="left"

할 수 있을 겁니다!

언급URL : https://stackoverflow.com/questions/49225505/how-to-make-text-wrap-around-image-with-bootstrap-4-without-float