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>

命令

通過修改 HTML 本身或添加一些自定義 flexbox CSS 來設置order屬性（為您選擇的整數）來更改媒體對像中的內容順序。

媒體對象
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>