牌

Bootstrap 的卡片提供了具有多種變體和選項的靈活且可擴展的內容容器。

關於

卡片是一種靈活且可擴展的內容容器。它包括頁眉和頁腳選項、各種內容、上下文背景顏色和強大的顯示選項。如果您熟悉 Bootstrap 3，卡片將取代我們的舊面板、孔和縮略圖。與這些組件類似的功能可用作卡片的修飾符類。

例子

卡片是用盡可能少的標記和样式構建的，但仍然設法提供大量的控制和定制。使用 flexbox 構建，它們可以輕鬆對齊並與其他 Bootstrap 組件很好地混合。默認情況下它們沒有margin，因此根據需要使用間距實用程序。

下面是一個包含混合內容和固定寬度的基本卡片的示例。卡片開始時沒有固定寬度，因此它們自然會填滿其父元素的整個寬度。這很容易通過我們的各種尺寸選項進行定制。

卡片標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

去一個地方

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

內容類型

卡片支持多種內容，包括圖像、文本、列表組、鏈接等。以下是支持的示例。

身體

卡片的組成部分是.card-body. 每當您需要卡片中的填充部分時使用它。

這是卡片正文中的一些文本。

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

標題、文本和鏈接

.card-title通過添加到<h*>標籤來使用卡片標題。.card-link同樣，通過添加到<a>標籤來添加鏈接並彼此相鄰放置。

.card-subtitle通過將 a 添加到<h*>標籤來使用字幕。如果將.card-title和.card-subtitle項目放在一個.card-body項目中，則卡片標題和副標題很好地對齊。

卡片標題

卡片字幕

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

卡鏈接另一個鏈接

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

圖片

.card-img-top將圖像置於卡片頂部。使用.card-text，可以將文本添加到卡片中。其中的文本.card-text也可以使用標準 HTML 標記進行樣式設置。

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

列出組

在具有刷新列表組的卡片中創建內容列表。

一個物品
第二項
第三項

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

精選

一個物品
第二項
第三項

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

一個物品
第二項
第三項

卡片頁腳

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

廚房水槽

混合和匹配多種內容類型以創建您需要的卡片，或將所有內容放入其中。下面顯示的是圖像樣式、塊、文��樣式和列表組——所有這些都包含在一個固定寬度的卡片中。

卡片標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

一個物品
第二項
第三項

卡鏈接另一個鏈接

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

頁眉和頁腳

在卡片中添加可選的頁眉和/或頁腳。

精選

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

卡片標題可以通過添加元素.card-header來設置樣式。<h*>

精選

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

引用

眾所周知的引用，包含在 blockquote 元素中。

源標題中著名的人

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

精選

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

2天前

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

漿紗

卡片假定沒有特定width的開始，因此除非另有說明，否則它們將是 100% 寬。您可以根據需要使用自定義 CSS、網格類、網格 Sass 混合程序或實用程序進行更改。

使用網格標記

使用網格，根據需要將卡片包裝在列和行中。

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

使用實用程序

使用我們少數可用的尺寸調整實用程序來快速設置卡片的寬度。

卡片標題

下面的支持文本作為附加內容的自然引導。

按鈕

卡片標題

下面的支持文本作為附加內容的自然引導。

按鈕

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

使用自定義 CSS

在樣式表中使用自定義 CSS 或作為內聯樣式設置寬度。

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

文本對齊

您可以使用我們的文本對齊類快速更改任何卡片的整體或特定部分的文本對齊方式。

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

使用 Bootstrap 的導航組件向卡片的標題（或塊）添加一些導航。

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

特殊標題處理

下面的支持文本作為附加內容的自然引導。

去一個地方

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

圖片

卡片包括一些處理圖像的選項。選擇在卡片的任一端附加“圖像大寫”、使用卡片內容覆蓋圖像或簡單地將圖像嵌入卡片中。

圖片上限

與頁眉和頁腳類似，卡片可以包含頂部和底部的“圖像大寫”——位於卡片頂部或底部的圖像。

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

<div class="card mb-3">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

圖像疊加

將圖像變成卡片背景並覆蓋卡片的文字。根據圖像，您可能需要也可能不需要其他樣式或實用程序。

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

請注意，內容不應大於圖像的高度。如果內容大於圖像，則內容將顯示在圖像之外。

水平的

使用網格和實用程序類的組合，可以以移動友好和響應式的方式將卡片設置為水平。在下面的示例中，我們刪除了網格排水溝.no-gutters並使用.col-md-*類使卡片在md斷點處保持水平。根據您的卡片內容，可能需要進一步調整。

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

卡片樣式

卡片包括用於自定義背景、邊框和顏色的各種選項。

背景和顏色

使用文本和背景實用程序來更改卡片的外觀。

標題

主卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

副牌標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

成功卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

危險卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

警告卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

信息卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

光卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

暗卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

向輔助技術傳達意義

使用顏色來添加含義僅提供視覺指示，不會傳達給輔助技術的用戶 - 例如屏幕閱讀器。確保由顏色表示的信息在內容本身（例如可見文本）中是顯而易見的，或者通過替代方式包含在內，例如隱藏在.sr-only類中的附加文本。

邊界

使用邊界實用程序僅更改border-color卡的。請注意，您可以將.text-{color}類放在卡片內容的父級.card或子集上，如下所示。

標題

主卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

副牌標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

成功卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

危險卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

警告卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

信息卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

光卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

標題

暗卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-warning">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-info">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins 實用程序

您還可以根據需要更改卡片頁眉和頁腳的邊框，甚至可以background-color使用.bg-transparent.

標題

成功卡標題

一些快速的示例文本以卡片標題為基礎，並構成卡片的大部分內容。

頁腳

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

卡片佈局

除了設置卡片內容的樣式外，Bootstrap 還包括一些用於佈置卡片系列的選項。目前，這些佈局選項還沒有響應式。

卡組

使用卡片組將卡片呈現為具有相同寬度和高度列的單個附加元素。卡組開始堆疊並用於從斷點display: flex;開始以統一尺寸連接。sm

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

卡片標題

此卡片在下面有支持文本，作為附加內容的自然引導。

最後更新 3 分鐘前

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這張卡片的內容比第一個顯示等高動作的卡片還要長。

最後更新 3 分鐘前

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

使用帶頁腳的卡片組時，其內容將自動排列。

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

卡片標題

此卡片在下面有支持文本，作為附加內容的自然引導。

最後更新 3 分鐘前

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這張卡片的內容比第一個顯示等高動作的卡片還要長。

最後更新 3 分鐘前

<div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

卡片組

需要一組不相互連接的相同寬度和高度的卡片嗎？使用卡片組。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

卡片標題

此卡片在下面有支持文本，作為附加內容的自然引導。

最後更新 3 分鐘前

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這張卡片的內容比第一個顯示等高動作的卡片還要長。

最後更新 3 分鐘前

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

就像卡片組一樣，卡片組中的卡片頁腳會自動排列。

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這個內容有點長。

最後更新 3 分鐘前

卡片標題

此卡片在下面有支持文本，作為附加內容的自然引導。

最後更新 3 分鐘前

卡片標題

這是一張更寬的卡片，下面有支持文本作為附加內容的自然引導。這張卡片的內容比第一個顯示等高動作的卡片還要長。

最後更新 3 分鐘前

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

網格卡

使用 Bootstrap 網格系統及其.row-cols類來控制每行顯示多少個網格列（環繞在卡片周圍）。例如，這裡.row-cols-1將卡片放在一列上.row-cols-md-2，從中間斷點開始，將四張卡片分成多行等寬。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

將其更改為.row-cols-3，您將看到第四張卡片包裝。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

當您需要相等的高度時，添加.h-100到卡片中。如果你想要默認等高，你可以$card-height: 100%在 Sass 中設置。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

卡片標題

這是一張短卡。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。

卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

卡片欄

卡片可以通過將它們包裹在.card-columns. 卡片是用 CSScolumn屬性而不是 flexbox 構建的，以便於對齊。卡片的順序是從上到下，從左到右。

小心！您的卡列里程可能會有所不同。為了防止卡片跨越列，我們必須將它們設置display: inline-block為column-break-inside: avoid還不是防彈解決方案。

換行的卡片標題

這是一張較長的卡片，下面有支持文本，作為附加內容的自然引導。這個內容有點長。

眾所周知的引用，包含在 blockquote 元素中。

源標題中著名的人

卡片標題

此卡片在下面有支持文本，作為附加內容的自然引導。

最後更新 3 分鐘前

眾所周知的引用，包含在 blockquote 元素中。

源標題中著名的人

卡片標題

這張卡片有一個常規的標題和下面的一小段文字。

最後更新 3 分鐘前

眾所周知的引用，包含在 blockquote 元素中。

源標題中著名的人

卡片標題

這是另一張卡片，下面有標題和支持文字。這張卡片有一些額外的內容，使其整體略高。

最後更新 3 分鐘前

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

卡片列也可以通過一些額外的代碼進行擴展和定制。下面顯示的是.card-columns該類的擴展，它使用我們使用的相同 CSS（CSS 列）來生成一組用於更改列數的響應層。

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}