如何在 BS 中将文本环绕在图像周围，将文本置于移动设备上的图像下方

【问题标题】：How to wrap text around image in BS placing text under image on mobile如何在 BS 中将文本环绕在图像周围，将文本置于移动设备上的图像下方
【发布时间】：2021-03-28 04:17:08
【问题描述】：

我有一些环绕图像的文本。在移动设备上不使用媒体查询时，可以将文本放在图像下方。（仅引导类？）

<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-body">

        <!-- image -->
        <figure class="figure float-left mr-3">
          <img class="img-fluid rounded-circle mt-3 mx-auto d-block" src="http://placekitten.com/g/200/200" />
          <figcaption>
            <h4 class="text-center mt-3">Kitten</h4>
          </figcaption>
        </figure>
        <!-- text -->
        <p>
          Lorem Ipsum ......
        </p>

      </div>
    </div>
  </div>
</div>

这是我创建的小提琴：https://jsfiddle.net/vh7m892z/5/

【问题讨论】：

标签： html image twitter-bootstrap css-float

【解决方案1】：

您可以在此实例中使用 BS 实用程序类。

在您的 <figure> 元素上使用 float-sm-left。根据需要进行调整。

在此处查看float 文档。

<div class="row">
  <div class="col">
    <div class="card">
      <div class="card-body">

        <!-- image -->
        <figure class="figure float-sm-left mr-3">
          <img class="img-fluid rounded-circle mt-3 mx-auto d-block" src="http://placekitten.com/g/200/200" />
          <figcaption>
            <h4 class="text-center mt-3">Kitten</h4>
          </figcaption>
        </figure>
        <!-- text -->
        <p>
          Lorem Ipsum ......
        </p>

      </div>
    </div>
  </div>
</div>

这是您更新后的Fiddle

另外，要获得所需的样式，只需使用几个额外的 BS 类。

<figure class="figure d-block float-sm-left mx-auto mr-sm-3">

查看更新的Fiddle with a centred image。

【讨论】：