如何在BS中将文本包裹在图像周围，将文本放在手机上的图像下方

Question

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

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

Answer 1

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

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

请参阅此处的浮动文档。

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