Question

是否有一种方法可以使用引导网格布局将文本环绕在响应图像上？我试图避免使用媒体查询。这本质上就是我要的：

我已经尝试了行和列的许多不同变体来使其工作。也许我太固执了，应该只使用媒体查询，但是我认为也许有人通过引导网格找到了解决方案。这是我目前正在使用的东西。

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5 col-lg-4">
      <img class="img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
    </div>
    <div class="col-md-6 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
        pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
      </p>
    </div>
  </div>
</div>

Answer 1

您可以简单地用简单的float:left

包装内容

尝试一下。

.row .col-md-5{float:left;}
.row{max-width:550px;}/*optional*/

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5 col-lg-4">
      <img class="img-fluid" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
    </div>
    <div class="col-md-6 col-lg-7">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. <br /><br /> Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus
        pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.
      </p>
    </div>
  </div>
</div>

PS：我设置最大宽度只是为了确保内容在包装。

Answer 2

<style type="text/css">
      @media only screen and (max-width:480px) {
                  img {
                      display:block;
                      float:none;
                      margin:0 auto 20px !important;
                  }
              }
    </style>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body style="margin:0; background:#000;">
   
    <div style="max-width:600px; margin:0 auto; background:#fff; overflow:hidden;">
      <div style="Margin:20px;">
        
        <img src="https://www.clipartqueen.com/image-files/small-face-silhouette.png" align="right" width="140" height="140" border="0" style="Margin:0 0 20px 20px; background:#E79851;"/>
            
        <p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio, aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at, debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum. Hic illum vitae iusto aspernatur tempora voluptatem id dolor reiciendis amet ea iste similique fuga, accusamus quibusdam, atque itaque quae sit dolorem asperiores facilis, fugit odio eveniet. Autem iusto nisi, minus sunt fuga quas sed expedita incidunt veniam nobis id ab. Blanditiis ullam laboriosam, quibusdam fugiat repellat labore nulla natus minima at, a veritatis nostrum dignissimos ipsa libero, voluptatem itaque!
            </p>
      </div>
    </div>
  </body>
</html>

Answer 3

您可以使用.float-left使文字环绕图像：

.mw-25 {
  max-width: 25%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div>
        <img class="img float-left mw-25 border" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
        <p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.Pellentesque viverra suscipit nibh, vitae laoreet diam semper non.</p>
        <p>Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper.</p>
        <p>Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac.</p>
      </div>
    </div>
  </div>
</div>

Answer 4

您可以使它成为单列而不是使用两列。 Bootstrap 4的默认float-sm-left, pr-3, pb-3类用于对齐填充和浮动元素。您可以根据需要通过将float-sm-left更改为float-md-left, float-lg-left, float-xl-left来调整响应。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col">
      <h3>Lorem Ipsum</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <img class="img-fluid float-sm-left pr-3 pb-3" src=https://www.clipartqueen.com/image-files/small-face-silhouette.png alt="Photo of me">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
        Pellentesque viverra suscipit nibh, vitae laoreet diam semper non. Ut consequat scelerisque molestie. Vivamus vel lacus in ligula varius luctus non at diam. Suspendisse vitae tortor felis. Phasellus rutrum sapien ut lectus pretium, ut ullamcorper enim dictum. Nam sagittis tempus dignissim.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit ligula nec est aliquet ullamcorper. Suspendisse et semper lectus, vitae pellentesque tortor. Etiam bibendum leo ligula, id aliquam urna interdum ac. In egestas ornare mauris eget rutrum.
      </p>
    </div>
  </div>
</div>

文字环绕响应图像

4 个答案: