我想在Bootstrap v5.0.0-alpha 1中使用媒体对象,但如何使用?
在Bootstrap 3和4中,我是这样使用它的:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
<img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Doe <small>Posted on February 19, 2016</small></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
字符串
在v5.0.0-alpha1中,我可以使用哪个类作为媒体对象?我在Bootstrap 5中找不到任何名为“media”的类。
3条答案
按热度按时间bvhaajcl1#
在Bootstrap 5中,
.media
对象已被删除。相反,您可以使用沿着flexbox的实用程序类来创建类似的布局。字符串
qcbq4gxm2#
Bootstrap 5的文档说明了如何使用卡来实现旧的媒体对象布局。https://getbootstrap.com/docs/5.0/components/card/#horizontal
举例来说:
字符串
stszievb3#
对于那些只使用Bootstrap的网格部分的人来说,你可以实现这样的媒体对象布局:
字符串
col-auto
将列收缩 Package 到内容的宽度(在上面的示例中,是图像),col
只是占用(或分配,如果有多个)剩余的空间。有关更多信息,请参阅文档。