跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

卡片

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

层级：components
查看原文
本页目录

卡片是灵活且可扩展的内容容器，支持标题和页脚、多种内容、上下文背景颜色以及额外的显示选项。卡片起始时没有固定宽度，因此它们会自然填充父元素的宽度，或插入到你的网格列中。

PlaceholderImage cap

卡片标题

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

去某个地方
HTML
<section class="card" style="max-width: 320px">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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-solid theme-primary">Go somewhere</a>
  </div>
</section>

它是如何工作的

卡片的构建尽可能少使用标记和样式，但仍然能够提供大量的控制和自定义选项。

  • 卡片是 flexbox 容器，因此可以通过 flexbox 工具 和 网格列类 轻松对齐。

  • .card 默认没有内边距，你需要使用 .card-body 来添加。可以将其用作修饰类或作为子元素，搭配页眉、页脚、图片等使用。这可以以最小的开销实现更大的灵活性。

  • 卡片默认没有 margin。根据需要使用 边距工具 或 间距工具。

  • 卡片可以包含文本、图片、列表及大多数其他 HTML 元素。

  • 选择适合内容的语义化 HTML。在我们的文档中为了简化使用了 <div>，但你也可以使用 <section>、<article> 等。

内容类型

正文

卡片的构建模块是 .card-body。每当你需要在卡片内创建一个带内边距的部分时，请使用它。

这是一张卡片正文中的一些文字。
HTML
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

对于简单卡片，你可以直接在卡片元素上使用 .card-body 类。

这是卡片正文中的一些文字。
HTML
<div class="card card-body">
  This is some text within a card body.
</div>

标题、文本和链接

卡片主体将其直接子元素排列成一列，并应用一致的间距。使用这些可选类作为内容挂钩。

  • 标题使用 .card-title。
  • 副标题使用 .card-subtitle。它可以减少副标题上方的间距。
  • 正文使用 .card-text。

根据需要使用类型和颜色工具。链接不需要特定于卡片的类。

示例卡片标题

带有卡片副标题

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

卡片链接
HTML
<div class="card" style="max-width: 320px;">
  <div class="card-body">
    <h4 class="card-title">Example card title</h4>
    <p class="card-subtitle fg-3">With a card subtitle</p>
    <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="#">Card link</a>
  </div>
</div>

图片

将图片放置在卡片的任意位置，并按你喜欢的方式进行样式设计。

PlaceholderImage cap
身体内部的影像

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

最后更新时间：3分钟前
HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <img src="..." class="card-img" alt="...">
    <h5 class="mt-2 mb-0">Image within the body</h5>
    <p class="card-text fg-2">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <small class="fg-3">Last updated 3 mins ago</small>
  </div>
</div>

使用 .card-img-top 和 .card-img-bottom 来圆化图像的顶部和底部角。

PlaceholderImage cap

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

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

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>
<div class="card" style="width: 18rem;">
  <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>
  <img src="..." class="card-img-bottom" alt="...">
</div>

列表组

当你的卡片只包含一个列表组—没有头部、底部或主体—请单独使用.list-group。卡片本身已经绘制了外边框，因此卡片内的默认列表组会使边框加倍。

  • 一件物品
  • 第二项
  • 第三项
HTML
<ul class="list-group" style="width: 18rem;">
  <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>

当你将列表组与其他卡片子组件混合使用时，添加 .list-group-flush 以去掉列表自身的外边框。

精选
    [!代码 高亮]
  • 一件物品
  • 第二项
  • 第三项
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">
    <h4 class="card-title">Card title</h4>
    <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 flex-row gap-4">
    <a href="#">Card link</a>
    <a href="#">Another link</a>
  </div>
</div>

在卡片内添加可选的页眉和/或页脚。

精选

特别标题处理

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

去某个地方
HTML
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn-solid theme-primary">Go somewhere</a>
  </div>
</div>

可以通过添加来设置卡片标题的样式 .card-header 到 <h*> 元素。

精选

特别标题处理

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

去某个地方
HTML
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn-solid theme-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">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn-solid theme-primary mx-auto">Go somewhere</a>
  </div>
  <div class="card-footer fg-2">
    2 days ago
  </div>
</div>

宽度

卡片默认没有特定的 width 起始，所以它们会占据 100% 的宽度，除非另有说明。你可以根据需要通过自定义 CSS、网格类、网格 Sass 混入或工具来进行修改。

网格

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

卡片标题

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

去某个地方

卡片标题

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

去某个地方
HTML
<div class="row">
  <div class="sm:col-6 mb-3 sm:mb-0">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn-solid theme-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="sm:col-6">
    <div class="card">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn-solid theme-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

工具

使用我们少量的可用尺寸工具，快速设置卡片的宽度。

卡片标题

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

按钮

卡片标题

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

按钮
HTML
<div class="card w-75 mb-3">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn-solid theme-primary">Button</a>
  </div>
</div>

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

自定义 CSS

在样式表中或作为内联样式使用自定义 CSS 来设置宽度。

卡片标题

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

去某个地方
HTML
<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn-solid theme-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-solid theme-primary mx-auto">Go somewhere</a>
  </div>
</div>

这也适用于 .nav-pills。

特别标题处理

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

去某个地方
HTML
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-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-solid theme-primary mx-auto">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">
    <h4 class="card-title">Card title</h4>
    <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="fg-2">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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="fg-2">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

图片叠加

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

PlaceholderCard image

卡片标题

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

最后更新时间：3分钟前

HTML
<div class="card theme-inverse">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h4 class="card-title">Card title</h4>
    <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>

请注意，内容不应高于图片的高度。如果内容超过图片的高度，内容将显示在图片之外。

卡片行

使用 .card-row 类使卡片横向显示。对于图片标题，使用 .card-img-start 或 .card-img-end 类将图片放置在卡片的（内联）起始或结束位置。

PlaceholderImage

卡片标题

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

最后更新时间：3分钟前

HTML
<div class="card card-row" style="max-width: 540px;">
  <img src="..." class="card-img-start" alt="...">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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="fg-2">Last updated 3 mins ago</small></p>
  </div>
</div>

以及反向布局：

卡片标题

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

最后更新时间：3分钟前

PlaceholderImage
HTML
<div class="card card-row" style="max-width: 540px;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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="fg-2">Last updated 3 mins ago</small></p>
  </div>
  <img src="..." class="card-img-end" alt="...">
</div>

主题变体

使用我们的主题颜色工具自定义卡片。默认情况下，卡片在应用主题颜色时会使用bg作为其背景色和边框色。使用.card-subtle可以交换背景色和边框色，以获得更柔和的外观。

主要的

卡片标题

卡牌文字…

口音

卡片标题

卡牌文字…

成功

卡片标题

卡牌文字…

危险

卡片标题

卡牌文字…

警告

卡片标题

卡牌文字…

信息

卡片标题

卡牌文字…

反向

卡片标题

卡牌文字…

次要

卡片标题

卡牌文字…

HTML
<div class="card theme-primary">…</div>
<div class="card theme-accent">…</div>
<div class="card theme-success">…</div>
<div class="card theme-danger">…</div>
<div class="card theme-warning">…</div>
<div class="card theme-info">…</div>
<div class="card theme-inverse">…</div>
<div class="card theme-secondary">…</div>
主要

卡片标题

卡牌文字…

口音

卡片标题

卡牌文字…

成功

卡片标题

卡牌文字…

危险

卡片标题

卡牌文字…

警告

卡片标题

卡牌文字…

信息

卡片标题

卡牌文字…

反向

卡片标题

卡牌文字…

次要

卡片标题

卡牌文字…

HTML
<div class="card card-subtle theme-primary">…</div>
<div class="card card-subtle theme-accent">…</div>
<div class="card card-subtle theme-success">…</div>
<div class="card card-subtle theme-danger">…</div>
<div class="card card-subtle theme-warning">…</div>
<div class="card card-subtle theme-info">…</div>
<div class="card card-subtle theme-inverse">…</div>
<div class="card card-subtle theme-secondary">…</div>

半透明卡片

向卡片的背景添加.card-translucent以模糊和增加饱和度。页眉和页脚背景也会进行调整，以保持一致的外观。

半透明卡

这张卡片有半透明的背景和背景模糊效果。

去某个地方
HTML
<div class="card card-translucent" style="width: 18rem;">
  <div class="card-body">
    <h4 class="card-title">Translucent card</h4>
    <p class="card-text">This card has a translucent background with a backdrop blur effect.</p>
    <a href="#" class="btn-solid theme-primary">Go somewhere</a>
  </div>
</div>
精选

带标题的卡片

页眉和页脚也被设置为半透明以保持一致的外观。

去某个地方
2天前
HTML
<div class="card card-translucent" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Card with header</h4>
    <p class="card-text">Headers and footers are also made translucent to maintain a consistent look.</p>
    <a href="#" class="btn-solid theme-primary">Go somewhere</a>
  </div>
  <div class="card-footer fg-2">
    2 days ago
  </div>
</div>

卡片布局

除了为卡片内的内容设置样式之外，Bootstrap 还包括一些用于排列一系列卡片的选项。

卡片组

使用卡片组将卡片呈现为单个附加元素，列宽和列高相等。卡片组一开始是堆叠的，并使用 display: flex; 在 sm 断点开始时变为附加且尺寸统一。

此布局使用了 容器查询，因此将卡片组包装在查询容器中——在父元素上添加 .contains-inline 工具类——以使行布局生效。没有查询容器，卡片将保持堆叠状态。

PlaceholderImage cap

卡片标题

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

最后更新时间：3分钟前

PlaceholderImage cap

卡片标题

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

最后更新时间：3分钟前

PlaceholderImage cap

卡片标题

这是一个更宽的卡片，下面有辅助文本，自然引入更多内容。这个卡片的内容比第一个更长，以显示相等高度的效果。

最后更新时间：3分钟前

HTML
<div class="contains-inline">
  <div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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="fg-2">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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="fg-2">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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="fg-2">Last updated 3 mins ago</small></p>
    </div>
  </div>
  </div>
</div>

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

PlaceholderImage cap

卡片标题

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

最后更新时间：3分钟前
PlaceholderImage cap

卡片标题

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

最后更新时间：3分钟前
PlaceholderImage cap

卡片标题

这是一个更宽的卡片，下面有辅助文本，自然引入更多内容。这个卡片的内容比第一个更长，以显示相等高度的效果。

最后更新时间：3分钟前
HTML
<div class="contains-inline">
  <div class="card-group">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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="fg-2">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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="fg-2">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <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="fg-2">Last updated 3 mins ago</small>
    </div>
  </div>
  </div>
</div>

网格卡片

使用 Bootstrap 网格系统及其 .row-cols 类 来控制每行显示多少个网格列（包裹你的卡片）。例如，这里是 .row-cols-1 将卡片布局在一列中，以及 .md:row-cols-2 从中等断点起，将四张卡片在多行中平均分配

PlaceholderImage cap

卡片标题

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

PlaceholderImage cap

卡片标题

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

PlaceholderImage cap

卡片标题

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

PlaceholderImage cap

卡片标题

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

HTML
<div class="row row-cols-1 md:row-cols-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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 md:row-cols-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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 md:row-cols-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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">
        <h4 class="card-title">Card title</h4>
        <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 md:row-cols-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h4 class="card-title">Card title</h4>
        <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="fg-2">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">
        <h4 class="card-title">Card title</h4>
        <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="fg-2">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">
        <h4 class="card-title">Card title</h4>
        <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="fg-2">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

CSS

变量

卡片在.card上使用本地 CSS 变量进行实时自定义。CSS 变量的值由每个组件独有的 Sass map生成，并应用于上述类。

scss/_card.scss
// stylelint-disable-next-line scss/dollar-variable-default
$card-tokens: defaults(
  (
    --card-spacer-y: var(--spacer-6),
    --card-spacer-x: var(--spacer-6),
    --card-subtitle-color: inherit,
    --card-border-width: var(--border-width),
    --card-border-color: var(--border-color),
    --card-border-radius: var(--radius-7),
    --card-box-shadow: none,
    --card-inner-border-radius: calc(var(--card-border-radius) - var(--border-width)),
    --card-cap-padding-y: var(--spacer-3),
    --card-cap-padding-x: var(--spacer-5),
    --card-cap-bg: var(--bg-1),
    --card-cap-color: inherit,
    --card-height: auto,
    --card-color: inherit,
    --card-bg: var(--bg-body),
    --card-img-overlay-padding: var(--card-spacer-y),
    --card-group-margin: #{$grid-gutter-x * .5},
    --card-body-gap: calc(var(--card-spacer-y) * .5),
  ),
  $card-tokens
);