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>
自己動手試一試 »
