<div class="media">
<img src="path/to/image.jpg" class="mr-3" alt="示例图像">
<div class="media-body">
<h5 class="mt-0">多媒体对象标题</h5>
<p>这是一段多媒体对象的描述文本。可以包含大量的文本内容。</p>
</div>
</div>
在这个例子中，media 类用于包裹整个多媒体对象。图像使用 img 元素，而包含文本内容的区域使用 media-body 类。mr-3 和 mt-0 是用于设置图像和标题之间的间距的 Bootstrap 辅助类。
你还可以将多媒体对象与列表结合使用，创建一个包含多个多媒体对象的列表。以下是一个带有多个多媒体对象的列表示例：
<ul class="list-unstyled">
<li class="media">
<img src="path/to/image1.jpg" class="mr-3" alt="图像1">
<div class="media-body">
<h5 class="mt-0">标题1</h5>
<p>描述文本1</p>
</div>
</li>
<li class="media my-4">
<img src="path/to/image2.jpg" class="mr-3" alt="图像2">
<div class="media-body">
<h5 class="mt-0">标题2</h5>
<p>描述文本2</p>
</div>
</li>
<!-- 更多的多媒体对象 -->
</ul>
在这个例子中，list-unstyled 类用于移除列表的默认样式，而 my-4 类用于设置列表项之间的垂直间距。
通过适当地使用 Bootstrap 的辅助类，你可以方便地创建漂亮且响应式的多媒体对象。根据你的具体需求，你可能需要调整样式和结构。
转载请注明出处：http://www.zyzy.cn/article/detail/12625/Bootstrap