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>
自己动手试一试 »
