bootstrap 排版 图片+文字类文章 常用样式

image.png

container/media//media-left,media-body/media-heading

<div class="container">
<h2>多媒体对象</h2>
<p>使用 "media-left" 类来设置多媒体对象左对齐。文本内容需要放在图片之后。</p>
<p>"media-right" 类用于设置多媒体对象右对齐。</p>

<div class="media">
<div class="media-left">
<img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
</div>
<div class="media-body">
<h4 class="media-heading">左对齐</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
</div>

---

<div class="media">
<div class="media-body">
<h4 class="media-heading">右对齐</h4>
<p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
</div>
<div class="media-right">
<img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
</div>
</div>
</div>