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>