Source

媒体对象

Bootstrap 媒体对象的文档和示例，用于构建高度重复的组件，如博客评论、推文等。

例子

媒体对象有助于构建复杂且重复的组件，其中一些媒体位于不环绕所述媒体的内容旁边。另外，多亏了 flexbox，它只需要两个必需的类就可以做到这一点。

下面是单个媒体对象的示例。只需要两个类 - 包装.media和.media-body围绕您的内容。可以通过间距实用程序控制可选的填充和边距。

Placeholder 64x64
媒体标题
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。 
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
</div>
Flexbug #12：内联元素不被视为弹性项目

Internet Explorer 10-11 不会将链接或图像（或伪元素）等内联元素呈现::before为::after弹性项目。唯一的解决方法是设置一个非内联display值（例如，、、block或inline-block）flex。我们建议使用.d-flex我们的显示实用程序之一，作为一个简单的修复。

资料来源： GitHub 上的 Flexbugs

嵌套

媒体对象可以无限嵌套，但我们建议您在某个时候停下来。嵌套.media在.media-body父媒体对象中。

Placeholder 64x64
媒体标题
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
Placeholder 64x64
媒体标题
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。 
<div class="media">
  <img src="..." class="mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

    <div class="media mt-3">
      <a class="mr-3" href="#">
        <img src="..." class="mr-3" alt="...">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
  </div>
</div>

结盟

媒体对象中的媒体可以与 flexbox 实用程序对齐到内容的顶部（默认）、中间或末尾.media-body。

Placeholder 64x64
顶部对齐的媒体

Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。

Donec sed odio dui。Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。

<div class="media">
  <img src="..." class="align-self-start mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
居中对齐的媒体

Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。

Donec sed odio dui。Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。

<div class="media">
  <img src="..." class="align-self-center mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>
Placeholder 64x64
底部对齐的媒体

Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。

Donec sed odio dui。Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。

<div class="media">
  <img src="..." class="align-self-end mr-3" alt="...">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
    <p class="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

命令

order通过修改 HTML 本身或添加一些自定义 flexbox CSS 来设置属性（为您选择的整数）来更改媒体对象中的内容顺序。

媒体对象
Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
Placeholder 64x64 
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  </div>
  <img src="..." class="ml-3" alt="...">
</div>

媒体列表

因为媒体对象的结构要求很少，所以您也可以在列表 HTML 元素上使用这些类。在您的<ul>or<ol>上，添加.list-unstyled以删除任何浏览器默认列表样式，然后应用于.media您<li>的 s. 与往常一样，在需要微调的地方使用间距实用程序。

  • Placeholder 64x64
    基于列表的媒体对象
    Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
  • Placeholder 64x64
    基于列表的媒体对象
    Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。
  • Placeholder 64x64
    基于列表的媒体对象
    Cras 坐在 amet nibh libero，在 gravida nulla。Nulla vel metus scelerisque ante sollicitudin。Cras purus odio，前庭在 vulputate，tempus viverra turpis。Fusce condimentum nunc ac nisi vulputate fringilla。在 faucibus 中的 Donec lacinia congue felis。 
<ul class="list-unstyled">
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media my-4">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
  <li class="media">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </div>
  </li>
</ul>