Bootstrap 多媒体对象

多媒体对象（Media Object）是"左侧或右侧配图 + 侧边文字"的经典版式，常见于评论列表、新闻摘要、用户动态。Bootstrap 提供 .media 系列类快速搭建这种结构，还支持小图相对文字在顶部、中部或底部对齐，并允许无限嵌套来模拟楼中楼回复。

基本结构

一个完整的多媒体对象由容器、左右区域和正文三部分构成：

<div class="media">
  <div class="media-left">
    <img src="avatar.jpg" class="media-object" alt="用户头像">
  </div>
  <div class="media-body">
    <h4 class="media-heading">作者：张三</h4>
    <p>这是一条评论内容，图片在左、文字在右。</p>
  </div>
</div>

效果：左侧显示小图，右侧标题加粗、正文紧随其后，整体紧凑对齐，和常见的评论版式一致。

图片的对齐方式

给 .media-left 追加对齐类，可以控制小图在文字侧的位置：

<div class="media">
  <div class="media-left media-middle">
    <img src="a.jpg" class="media-object" alt="示例图">
  </div>
  <div class="media-body">
    <h4 class="media-heading">中部对齐示例</h4>
    <p>当文字较高时，图片默认在顶部；加 media-middle 后图片垂直居中。</p>
  </div>
</div>

效果：文字块较高时，图片不再贴顶而是停在整块的垂直居中位置；同理把类换成 .media-bottom 可让图片贴底。

图片放在右侧

需要"文字在左、图在右"时，把正文放在前面、图区用 .media-right：

<div class="media">
  <div class="media-body">
    <h4 class="media-heading">右侧配图</h4>
    <p>正文在左，图片在右，适合强调配图的场景。</p>
  </div>
  <div class="media-right">
    <img src="b.jpg" class="media-object" alt="示例图">
  </div>
</div>

效果：版式左右对调，正文靠左、图片靠右，两侧仍保持垂直顶部对齐。

媒体列表与嵌套

用 .media-list 包裹多条 .media，并在第一条的 .media-body 内再放一层 .media，即可实现嵌套评论：

<ul class="media-list">
  <li class="media">
    <div class="media-left"><img src="a.jpg" class="media-object" alt="头像"></div>
    <div class="media-body">
      <h4 class="media-heading">楼主评论</h4>
      <p>正文内容……</p>
      <div class="media">
        <div class="media-left"><img src="b.jpg" class="media-object" alt="头像"></div>
        <div class="media-body">
          <h4 class="media-heading">回复</h4>
          <p>嵌套的回复会整体向右缩进。</p>
        </div>
      </div>
    </div>
  </li>
</ul>

效果：外层评论与内层回复自动形成层级缩进，看起来像论坛的楼中楼；嵌套层数不限，需要几层就套几层。

小结：.media 系列类可快速拼出"图文并排"版式，配合对齐类、.media-right 与嵌套即可覆盖评论、动态流等绝大多数内容列表场景。