l-1

WEB教程

主页/Bootstrap V5.3 中文手册/组件集合 Components/Card 卡片

Bootstrap V5.3 中文手册

Card 卡片

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

大约

卡片是一种灵活且可扩展的内容容器。它包括页眉和页脚选项、各种内容、上下文背景颜色和强大的显示选项。如果您熟悉 Bootstrap 3，卡片将取代我们的旧面板、孔和缩略图。与这些组件类似的功能可用作卡片的修饰符类。

例

卡片的构建使用尽可能少的标记和样式，但仍然设法提供大量的控制和自定义。它们采用 flexbox 构建，易于对齐并与其他 Bootstrap 组件很好地混合。默认情况下，它们没有，因此请根据需要使用间距实用程序。margin

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

占 位 符图像上限
卡片标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

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

字幕是通过向标签添加 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并分别将顶角和底角设置为圆角以匹配卡片的边框。使用 ，可以将文本添加到卡片中。其中的文本也可以使用标准 HTML 标签设置样式。.card-img-bottom.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>

列表组

在具有刷新列表组的卡片中创建内容列表。

  • 项目
  • 第二项
  • 第三项
[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>

厨房水槽

混合搭配多种内容类型以创建您需要的卡片，或将所有内容都放入其中。下面显示的是图像样式、块、文本样式和列表组，所有这些都包裹在固定宽度的卡片中。

占 位 符图像上限
卡片标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

  • 项目
  • 第二项
  • 第三项
卡片链接另一个链接
[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>
报价

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

来源标题中著名的人
[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>

上浆

卡片假设没有特定的开始，因此除非另有说明，否则它们将是 100% 宽的。您可以根据需要使用自定义 CSS、网格类、网格 Sass 混合或实用程序进行更改。width

使用网格标记

使用网格，根据需要将卡片包装成列和行。

特殊标题处理

下面的支持文本作为其他内容的自然引导。

去某个地方
特殊标题处理

下面的支持文本作为其他内容的自然引导。

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

图像

卡片包括一些用于处理图像的选项。选择在卡片的两端附加“图像大写字母”，将图像与卡片内容叠加，或者简单地将图像嵌入卡片中。

图像上限

与页眉和页脚类似，卡片可以包含顶部和底部的“图像大写字母”，即卡片顶部或底部的图像。

占 位 符图像上限
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

最后更新时间：3分钟前

卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

最后更新时间：3分钟前

占 位 符图像上限
[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>

图像叠加

将图片转换为卡片背景并叠加卡片的文本。根据图像的不同，您可能需要也可能不需要其他样式或实用程序。

占 位 符卡片图像
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

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

占 位 符图像
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

最后更新时间：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} 助手设置一个具有对比前景的前景。以前需要手动配对您选择的 .text-{color} 和 .bg-{color} 实用程序进行样式设置，如果您愿意，您仍然可以使用它们。background-colorcolor

页眉
主卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

页眉
辅助卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

页眉
成功卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

页眉
危险卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

页眉
警告卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

页眉
信息卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

页眉
轻卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

页眉
深色卡标题

一些快速示例文本，以卡片标题为基础，并构成卡片的大部分内容。

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

Mixins 实用程序

您还可以根据需要更改卡片页眉和页脚上的边框，甚至可以使用 删除它们。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

占 位 符图像上限
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

最后更新时间：3分钟前

占 位 符图像上限
卡片标题

此卡片在下面有支持文本，作为其他内容的自然引子。

最后更新时间：3分钟前

占 位 符图像上限
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这张卡片的内容比第一张更长，展示了等高动作。

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

使用带有页脚的卡片组时，其内容将自动排列。

占 位 符图像上限
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

最后更新时间：3分钟前
占 位 符图像上限
卡片标题

此卡片在下面有支持文本，作为其他内容的自然引子。

最后更新时间：3分钟前
占 位 符图像上限
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这张卡片的内容比第一张更长，展示了等高动作。

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

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

[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

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

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

当您需要相等的高度时，请添加到卡片中。如果默认情况下想要相等的高度，可以在 Sass 中设置。.h-100$card-height: 100%

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

占 位 符图像上限
卡片标题

这是一张短卡。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。

占 位 符图像上限
卡片标题

这是一张较长的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

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

就像卡片组一样，卡片页脚将自动排列。

占 位 符图像上限
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这个内容有点长。

最后更新时间：3分钟前
占 位 符图像上限
卡片标题

此卡片在下面有支持文本，作为其他内容的自然引子。

最后更新时间：3分钟前
占 位 符图像上限
卡片标题

这是一张更宽的卡片，下面有支持文本，作为其他内容的自然引子。这张卡片的内容比第一张更长，展示了等高动作。

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

砌筑

我们使用了一种纯 CSS 技术来模仿类似 Masonry 的柱子的行为，但这种技术带来了许多令人不快的副作用。如果你想在 中拥有这种类型的布局，你可以直接使用 Masonry 插件。Masonry 不包含在 Bootstrap 中，但我们制作了一个演示示例来帮助您入门。v4v5

CSS系统

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，卡片现在使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.card

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;

声明：该Bootstrap v5.3 内容来自Bootstrap v5.3官方网站；中文翻译是使用Microsoft Edge浏览器免费翻译而来，且部分存在结合了Deepseek及人工翻译。