跳到主要内容
在 GitHub 查看原文

卡片

Bootstrap 的卡片提供了一个灵活且可扩展的内容容器，具有多种变体和选项。

本页目录

关于

卡片是一种灵活且可扩展的内容容器。它包括头部和尾部选项、多种内容类型、上下文背景颜色以及强大的显示选项。如果你熟悉 Bootstrap 3，卡片取代了我们以前的面板、井字框和缩略图。这些组件的类似功能可作为卡片的修饰类使用。

示例

卡片的构建尽可能少使用标记和样式，但仍然能够提供大量的控制和自定义功能。使用 flexbox 构建，它们提供了便捷的对齐方式，并能很好地与其他 Bootstrap 组件混合使用。默认情况下它们没有 margin，所以根据需要使用 间距工具。

下面是一个包含混合内容且具有固定宽度的基础卡片示例。卡片一开始没有固定宽度，因此它们会自然地填充其父元素的整个宽度。我们可以通过各种尺寸选项轻松自定义。

PlaceholderImage 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 标签进行样式设置。

PlaceholderImage 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>

厨房水槽

混合搭配多种内容类型以创建所需的卡片，或者将所有内容都放进去。下方显示的是图片样式、区块、文字样式以及列表组——全部封装在固定宽度的卡片中。

PlaceholderImage 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">
    <figure>
      <blockquote class="blockquote">
        <p>A well-known quote, contained in a blockquote element.</p>
      </blockquote>
      <figcaption class="blockquote-footer">
        Someone famous in <cite title="Source Title">Source Title</cite>
      </figcaption>
    </figure>
  </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 mixin 或工具类来进行修改。

使用网格标记

使用网格，根据需要在列和行中排列卡片。

特别标题处理

下面的支持性文字作为引出更多内容的自然开场。

去某个地方
特别标题处理

下面的支持性文字作为引出更多内容的自然开场。

去某个地方
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>

图片

卡片提供了一些处理图像的选项。可以选择在卡片的任一端添加“图像标题”，使用卡片内容覆盖图像，或者简单地将图像嵌入卡片中。

图片标题

类似于页眉和页脚，卡片可以包含顶部和底部的“图片帽”——位于卡片顶部或底部的图片。

PlaceholderImage cap
卡片标题

这是一张更宽的卡片，下面有辅助文本，自然引出更多内容。这个内容稍微长一点。

最后更新时间：3分钟前

卡片标题

这是一张更宽的卡片，下面有辅助文本，自然引出更多内容。这部分内容稍微长一点。

最后更新时间：3分钟前

PlaceholderImage 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>

图片叠加

将图像转换为卡片背景，并叠加你的卡片文本。根据图像的不同，你可能需要或不需要额外的样式或工具。

PlaceholderCard 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 断点处使卡片呈水平排列。根据你的卡片内容，可能还需要进行进一步调整。

PlaceholderImage
卡片标题

这是一张更宽的卡片，下面有辅助文本，自然引出更多内容。这个内容稍微长一点。

最后更新时间：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 中添加

设置一个 background-color 有对比的前景 color 与 我们的 .text-bg-{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>

mixin工具

你还可以根据需要更改卡片标题和页脚的边框，甚至可以将它们移除 background-color 与 .bg-transparent.

标题
成功卡标题

一些快速的示例文本，用于扩展卡片标题并构成卡片内容的大部分。

页脚
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 断点开始时变为附加且尺寸统一。

PlaceholderImage cap
卡片标题

这是一张更宽的卡片，下面有辅助文本，自然引出更多内容。这部分内容稍微长一点。

最后更新时间：3分钟前

PlaceholderImage cap
卡片标题

这张卡片下面有辅助文本，作为引入额外内容的自然开端。

最后更新时间：3分钟前

PlaceholderImage 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>

在使用带有页脚的卡片组时，它们的内容会自动对齐。

PlaceholderImage cap
卡片标题

这是一张更宽的卡片，下面有辅助文本，自然引出更多内容。这部分内容稍微长一些。

最后更新时间：3分钟前
PlaceholderImage cap
卡片标题

这张卡片下面有辅助文本，作为额外内容的自然引入。

最后更新时间：3分钟前
PlaceholderImage 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 从中等断点起，将四张卡片在多行中平均分配

PlaceholderImage cap
卡片标题

这是一张较长的卡片，下面有辅助文本，自然引出更多内容。这些内容稍微长一些。

PlaceholderImage cap
卡片标题

这是一张较长的卡片，下面有辅助文本，自然引出更多内容。这部分内容稍微长一些。

PlaceholderImage cap
卡片标题

这是一张较长的卡片，下方有辅助文字，自然引出更多内容。

PlaceholderImage 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，你会看到第四张卡片换行。

PlaceholderImage cap
卡片标题

这是一张更长的卡片，下面有辅助文本，自然引出更多内容。这些内容稍微长一点。

PlaceholderImage cap
卡片标题

这是一张更长的卡片，下面有辅助文本，自然引出更多内容。这部分内容稍微长一些。

PlaceholderImage cap
卡片标题

这是一张较长的卡片，下方有辅助文字，自然引出更多内容。

PlaceholderImage 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%。

PlaceholderImage cap
卡片标题

这是一张较长的卡片，下面有辅助文本，自然引出更多内容。这些内容稍微长一些。

PlaceholderImage cap
卡片标题

这是一张短卡。

PlaceholderImage cap
卡片标题

这是一张较长的卡片，下方有辅助文字，自然引出更多内容。

PlaceholderImage 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>

就像卡片组一样，卡片底部会自动对齐。

PlaceholderImage cap
卡片标题

这是一张更宽的卡片，下面有辅助文本，自然引出更多内容。这部分内容稍微长一点。

最后更新时间：3分钟前
PlaceholderImage cap
卡片标题

这张卡片下面有辅助文本，作为额外内容的自然引入。

最后更新时间：3分钟前
PlaceholderImage 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>

砌体

在 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;