Bootstrap 4 媒体对象
媒体对象
Bootstrap 提供了一种简单的方法来将媒体对象（如图像或视频）与内容对齐。 媒体对象通常用于显示博客评论、推文等。
John Doe 发布于 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
John Doe 发布于 2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
基本媒体对象
John Doe 发布于 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
要创建一个媒体对象，请将 .media 类添加到容器元素，并将媒体内容放在具有 .media-body 类的子容器中。 根据需要添加填充和边距，使用间距实用工具
示例
<div class="media border p-3">
<img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Doe <small><i>发布于 2016 年 2 月 19 日</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
亲自试一试 »
嵌套媒体对象
媒体对象也可以嵌套（一个媒体对象在另一个媒体对象中）。
John Doe 发布于 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Jane Doe 发布于 2016 年 2 月 20 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
要嵌套媒体对象，请将新的 .media 容器放在 .media-body 容器内
示例
<div class="media border p-3">
<img src="img_avatar3.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Doe <small><i>发布于 2016 年 2 月 19 日</i></small></h4>
<p>Lorem ipsum...</p>
<div class="media p-3">
<img src="img_avatar2.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>Jane Doe <small><i>发布于 2016 年 2 月 20 日</i></small></h4>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
亲自试一试 »
右对齐媒体图片
John Doe 发布于 2016 年 2 月 19 日
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
要右对齐媒体图片，请在 .media-body 容器之后添加图片
示例
<div class="media border p-3">
<div class="media-body">
<h4>John Doe <small><i>发布于 2016 年 2 月 19 日</i></small></h4>
<p>Lorem ipsum...</p>
</div>
<img src="img_avatar3.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
亲自试一试 »
顶部、中间或底部对齐
使用 flex 实用工具，align-self-* 类将媒体对象放置在顶部、中间或底部
媒体顶部
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
媒体中间
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
媒体底部
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
示例
<!-- 媒体顶部 -->
<div class="media">
<img src="img_avatar1.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>媒体顶部</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 媒体中间 -->
<div class="media">
<img src="img_avatar1.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>媒体中间</h4>
<p>Lorem ipsum...</p>
</div>
</div>
<!-- 媒体底部 -->
<div class="media">
<img src="img_avatar1.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>媒体底部</h4>
<p>Lorem ipsum...</p>
</div>
</div>
亲自试一试 »
