跳到主要內容 跳到文件瀏覽
在 GitHub 上檢視

卡片

Bootstrap 的卡片提供一個彈性且可延伸的內容容器，具有多種變體和選項。

在此頁面

關於

卡片是一個彈性且可延伸的內容容器。它包含標頭和頁尾的選項、各種內容、背景顏色以及強大的顯示選項。如果您熟悉 Bootstrap 3，卡片將取代我們舊的面板、區塊和縮圖。這些元件的類似功能可作為卡片的修改器類別使用。

範例

卡片的建立使用最少的標記和樣式，但仍能提供大量的控制和自訂。使用彈性盒建立，提供容易的對齊，並與其他 Bootstrap 組件良好搭配。預設沒有margin，因此視需要使用間距工具。

以下是基本卡片的範例，包含混合內容和固定寬度。卡片一開始沒有固定寬度，因此會自然填滿其父元素的全部寬度。這可以透過我們的各種調整大小選項輕鬆自訂。

Placeholder - Bootstrap 框架Image cap
卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

前往某處
html 
<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。當您需要在卡片中建立一個帶有內距的區段時，請使用它。

這是卡片主體中的文字。
html 
<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新增到<h*>標籤來使用。如果將.card-title和.card-subtitle項目置於.card-body項目中，卡片標題和副標題會對齊得很好。

卡片標題
卡片副標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

卡片連結 另一個連結
html 
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">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-img-bottom 分別設定頂部和底部圓角與卡片邊框相符。透過 .card-text，可以將文字新增至卡片。.card-text 中的文字也可以使用標準 HTML 標籤進行樣式設定。

Placeholder - Bootstrap 框架Image cap

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

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>

清單群組

使用齊平清單群組在卡片中建立內容清單。

  • 一個項目
  • 第二個項目
  • 第三個項目
html 
<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>
特色
  • 一個項目
  • 第二個項目
  • 第三個項目
html 
<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>
  • 一個項目
  • 第二個項目
  • 第三個項目
卡片頁尾
html 
<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>

綜合範例

混合並搭配多種內容類型以建立您需要的卡片，或將所有內容都放進去。下方顯示的範例包含影像樣式、區塊、文字樣式和清單群組，全部都包覆在固定寬度的卡片中。

Placeholder - Bootstrap 框架Image cap
卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

  • 一個項目
  • 第二個項目
  • 第三個項目
卡片連結 另一個連結
html 
<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>

在卡片中新增一個選用的標題和/或頁尾。

特色
特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
html 
<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*> 元素來設定樣式。

特色
特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
html 
<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>
引述

一個著名的引述，包含在區塊引用元素中。

某個名人，來自 來源標題
html 
<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 天前
html 
<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-body-secondary">
    2 days ago
  </div>
</div>

調整大小

卡片一開始不會假設任何特定的 width，因此除非另有說明，否則它們會是 100% 寬度。您可以使用自訂 CSS、格線類別、格線 Sass 混用或工具程式，視需要進行變更。

使用格線標記

使用格線，視需要將卡片包覆在欄和列中。

特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
html 
<div class="row">
  <div class="col-sm-6 mb-3 mb-sm-0">
    <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>

使用工具程式

使用我們少數幾個 可用的尺寸公用程式 來快速設定卡片的寬度。

卡片標題

下方有輔助文字作為額外內容的自然導引。

按鈕
卡片標題

下方有輔助文字作為額外內容的自然導引。

按鈕
html 
<div class="card w-75 mb-3">
  <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 來設定寬度。

特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
html 
<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>

文字對齊

您可以使用我們的 文字對齊類別 快速變更任何卡片的文字對齊方式，包括整體或特定部分。

特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
html 
<div class="card mb-3" 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 mb-3" 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-end" 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 的 導覽元件 在卡片標題（或區塊）中新增一些導覽。

特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
html 
<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" aria-current="true" 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" aria-disabled="true">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>
特殊標題處理

下方有輔助文字作為額外內容的自然導引。

前往某處
html 
<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" aria-disabled="true">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>

圖片

卡片包含幾個可用於處理圖片的選項。選擇在卡片的任一端附加「圖片標題」，在卡片內容上疊加圖片，或僅將圖片嵌入卡片中。

圖片標題

與標題和頁尾類似，卡片可以包含頂部和底部的「圖片標題」，也就是卡片頂部或底部的圖片。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然引言。這段內容稍長。

最後更新於 3 分鐘前

卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然引言。這段內容稍長。

最後更新於 3 分鐘前

Placeholder - Bootstrap 框架Image cap
html 
<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-body-secondary">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-body-secondary">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

圖片疊加

將圖片轉換為卡片背景，並疊加卡片文字。根據圖片的不同，您可能需要或不需要額外的樣式或公用程式。

Placeholder - Bootstrap 框架Card image
卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然引言。這段內容稍長。

最後更新於 3 分鐘前

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
請注意，內容不應大於圖片的高度。如果內容大於圖片，內容將顯示在圖片外。

水平

透過網格和實用程式類別的組合，卡片可以以行動裝置友善且回應式的方式製作成水平。在以下範例中，我們使用 .g-0 移除了網格間距，並使用 .col-md-* 類別在 md 斷點處製作水平卡片。可能需要根據卡片內容進行進一步調整。

Placeholder - Bootstrap 框架Image
卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然引言。這段內容稍長。

最後更新於 3 分鐘前

html 
<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" 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-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

卡片樣式

卡片包含各種選項，可自訂其背景、邊框和顏色。

背景和顏色

在 v5.2.0 中新增

使用 我們的 .text-bg-{color} 輔助函式設定具有對比前景 color 的 background-color。以前需要手動配對您選擇的 .text-{color} 和 .bg-{color} 實用程式進行樣式設定，如果您偏好，您仍可以使用此方式。

標題
主要卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
次要卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
成功卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
危險卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
警告卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
資訊卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
淺色卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
深色卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

html 
<div class="card text-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-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-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-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-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-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 text-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-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>
無障礙提示：僅使用顏色來增加意義只會提供視覺指示，不會傳達給螢幕閱讀器等輔助技術的使用者。請確保意義從內容本身（例如，具有 足夠 色彩對比 的可見文字）是顯而易見的，或透過其他方式包含，例如使用 .visually-hidden 類別隱藏的附加文字。

邊框

使用 邊框工具程式 來變更卡片的 border-color。請注意，您可以將 .text-{color} 類別放在父層 .card 或卡片內容的子集，如下所示。

標題
主要卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
次要卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
成功卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
危險卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
警告卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
資訊卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
淺色卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

標題
深色卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

html 
<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">
    <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">
    <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">
    <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>

混合工具程式

您也可以視需要變更卡片標頭和頁尾的邊框，甚至可以使用 .bg-transparent 移除其 background-color。

標題
成功卡片標題

一些快速範例文字，建立在卡片標題上，並構成卡片內容的大部分。

頁尾
html 
<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 斷點開始相連，並具有統一的尺寸。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然引言。這段內容稍長。

最後更新於 3 分鐘前

Placeholder - Bootstrap 框架Image cap
卡片標題

這張卡片下方有說明文字，可自然地引導至其他內容。

最後更新於 3 分鐘前

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較寬的卡片，下方有說明文字，可自然地引導至其他內容。這張卡片的內容比第一張卡片更長，以顯示等高的效果。

最後更新於 3 分鐘前

html 
<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-body-secondary">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-body-secondary">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-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

將卡片群組與頁尾搭配使用時，其內容會自動對齊。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然引言。這段內容稍長。

最後更新於 3 分鐘前
Placeholder - Bootstrap 框架Image cap
卡片標題

這張卡片下方有說明文字，可自然地引導至其他內容。

最後更新於 3 分鐘前
Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較寬的卡片，下方有說明文字，可自然地引導至其他內容。這張卡片的內容比第一張卡片更長，以顯示等高的效果。

最後更新於 3 分鐘前
html 
<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-body-secondary">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-body-secondary">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-body-secondary">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

網格卡片

使用 Bootstrap 網格系統及其 .row-cols 類別 來控制每列顯示的網格欄位數（環繞在您的卡片周圍）。例如，這裡的 .row-cols-1 將卡片佈置在一欄中，而 .row-cols-md-2 將四張卡片平均分配到多列中，從中斷點開始。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

html 
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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，您將看到第四張卡片換行。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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 加入卡片。如果您預設想要等高，您可以在 Sass 中設定 $card-height: 100%。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張短卡片。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較長的卡片，下方有支援文字，作為額外內容的自然引導。這段內容稍長。

html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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">
    <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">
    <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">
    <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>

就像卡片群組一樣，卡片頁尾會自動對齊。

Placeholder - Bootstrap 框架Image cap
卡片標題

這是一個較寬的卡片，下方有支援文字，作為額外內容的自然引言。這段內容稍長。

最後更新於 3 分鐘前
Placeholder - Bootstrap 框架Image cap
卡片標題

這張卡片下方有說明文字，可自然地引導至其他內容。

最後更新於 3 分鐘前
Placeholder - Bootstrap 框架Image cap
卡片標題

這是一張較寬的卡片，下方有說明文字，可自然地引導至其他內容。這張卡片的內容比第一張卡片更長，以顯示等高的效果。

最後更新於 3 分鐘前
html 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <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 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-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <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 card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <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 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-body-secondary">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Masonry

在 v4 中，我們使用僅限 CSS 的技術來模擬類似 Masonry 的欄位行為，但此技術帶來了許多令人不快的 副作用。如果您想要在 v5 中擁有此類型的佈局，您只需使用 Masonry 外掛程式即可。Masonry 未包含在 Bootstrap 中，但我們製作了一個 示範範例 來幫助您入門。

CSS

變數

在 v5.2.0 中新增

作為 Bootstrap 不斷演進的 CSS 變數方法的一部分，卡片現在在 .card 上使用本機 CSS 變數，以增強即時自訂。CSS 變數的值透過 Sass 設定，因此 Sass 自訂仍受支援。

scss/_card.scss 
--#{$prefix}card-spacer-y: #{$card-spacer-y};
--#{$prefix}card-spacer-x: #{$card-spacer-x};
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
--#{$prefix}card-title-color: #{$card-title-color};
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
--#{$prefix}card-border-width: #{$card-border-width};
--#{$prefix}card-border-color: #{$card-border-color};
--#{$prefix}card-border-radius: #{$card-border-radius};
--#{$prefix}card-box-shadow: #{$card-box-shadow};
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
--#{$prefix}card-cap-bg: #{$card-cap-bg};
--#{$prefix}card-cap-color: #{$card-cap-color};
--#{$prefix}card-height: #{$card-height};
--#{$prefix}card-color: #{$card-color};
--#{$prefix}card-bg: #{$card-bg};
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
--#{$prefix}card-group-margin: #{$card-group-margin};

Sass 變數

scss/_variables.scss 
$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-title-color:                  null;
$card-subtitle-color:               null;
$card-border-width:                 var(--#{$prefix}border-width);
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                var(--#{$prefix}border-radius);
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba(var(--#{$prefix}body-color-rgb), .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           var(--#{$prefix}body-bg);
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;