在 GitHub 上查看

卡片

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

关于

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

示例

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

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

卡片标题

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

前往某处

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

内容类型

卡片支持各种内容，包括图像、文本、列表组、链接等。以下是支持内容的示例。

正文

卡片的基本构建模块是 .card-body。每当你需要在卡片内填充部分时，可以使用它。

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

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

标题、文本和链接

通过将 .card-title 添加到 <h*> 标记来使用卡片标题。同样，通过将 .card-link 添加到 <a> 标记来添加链接并将其并排放置。

通过将 .card-subtitle 添加到 <h*> 标记来使用副标题。如果 .card-title 和 .card-subtitle 项放置在 .card-body 项中，则卡片标题和副标题会很好地对齐。

卡片标题

卡片副标题

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

卡片链接另一个链接

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

图片

.card-img-top 将图像放置在卡片顶部。使用 .card-text，可以向卡片添加文本。.card-text 中的文本也可以使用标准 HTML 标记进行样式化。

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

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

列表组

使用齐平列表组在卡片中创建内容列表。

一项
第二项
第三项

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

精选

一项
第二项
第三项

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

一项
第二项
第三项

卡片页脚

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

综合示例

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

卡片标题

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

一项
第二项
第三项

卡片链接另一个链接

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

页眉和页脚

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

精选

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

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

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

精选

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

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

引用

一个众所周知的引用，包含在引用块元素中。

某位名人，出自 Source Title

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

精选

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

2 天前

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

尺寸

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

使用网格标记

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

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

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

使用实用工具

使用我们少数几个可用的尺寸实用程序来快速设置卡片的宽度。

卡片标题

带有作为附加内容的自然引文的下方支持文本。

按钮

卡片标题

带有作为附加内容的自然引文的下方支持文本。

按钮

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

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

使用自定义 CSS

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

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

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

文本对齐

你可以使用我们的文本对齐类快速更改任何卡片的文本对齐方式——整体或特定部分。

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

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

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

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

使用 Bootstrap 的导航组件为卡片标题（或块）添加一些导航。

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

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

特殊标题处理

带有作为附加内容的自然引文的下方支持文本。

前往某处

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

图片

卡片包含一些用于处理图像的选项。选择在卡片两端附加“图像标题”，在卡片内容上叠加图像，或简单地将图像嵌入到卡片中。

图片标题

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

卡片标题

这是一张较宽的卡片，下面有支持文本，自然引入了其他内容。此内容稍长一些。

上次更新时间：3 分钟前

卡片标题

这是一张较宽的卡片，下面有支持文本，自然引入了其他内容。此内容稍长一些。

上次更新时间：3 分钟前

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

图片叠加

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

卡片标题

这是一张较宽的卡片，下面有支持文本，自然引入了其他内容。此内容稍长一些。

上次更新时间：3 分钟前

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

请注意，内容不应大于图像的高度。如果内容大于图像，则内容将显示在图像外部。

水平

通过结合使用网格和实用程序类，可以以适合移动设备且响应式的方式使卡片水平排列。在下面的示例中，我们使用 .no-gutters 删除网格间隙，并使用 .col-md-* 类在 md 断点处使卡片水平排列。根据卡片内容的不同，可能需要进行进一步的调整。

卡片标题

这是一张较宽的卡片，下面有支持文本，自然引入了其他内容。此内容稍长一些。

上次更新时间：3 分钟前

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

卡片样式

卡片包含用于自定义其背景、边框和颜色的各种选项。

背景和颜色

使用文本和背景实用程序来更改卡片的外观。

标题

主要卡片标题

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

标题

次要卡片标题

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

标题

成功卡片标题

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

标题

危险卡片标题

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

标题

警告卡片标题

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

标题

信息卡片标题

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

标题

浅色卡片标题

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

标题

深色卡片标题

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

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

向辅助技术传达含义

仅使用颜色来添加含义只提供了一个视觉指示，而不会传达给辅助技术（如屏幕阅读器）的用户。确保由颜色表示的信息要么从内容本身（例如可见文本）中显而易见，要么通过其他方式包含，例如使用 .sr-only 类隐藏的附加文本。

边框

使用边框实用程序仅更改卡片的 border-color。请注意，你可以将 .text-{color} 类放在父 .card 或卡片内容的子集上，如下所示。

标题

主要卡片标题

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

标题

次要卡片标题

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

标题

成功卡片标题

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

标题

危险卡片标题

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

标题

警告卡片标题

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

标题

信息卡片标题

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

标题

浅色卡片标题

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

标题

深色卡片标题

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

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

混合实用工具

您还可以根据需要更改卡片页眉和页脚的边框，甚至可以使用 .bg-transparent 删除其 background-color。

标题

成功卡片标题

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

页脚

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

卡片布局

除了设置卡片中的内容样式外，Bootstrap 还包括一些用于布局一系列卡片的选项。目前，这些布局选项尚未响应。

卡片组

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

卡片标题

这是一张较宽的卡片，下面有支持文本，自然引入了其他内容。此内容稍长一些。

上次更新时间：3 分钟前

卡片标题

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

上次更新时间：3 分钟前

卡片标题

这是一张较宽的卡片，下方有支持文本，作为其他内容的自然引线。此卡片的内容比第一个卡片更长，以显示相等的高度操作。

上次更新时间：3 分钟前

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

在将卡片组与页脚一起使用时，它们的内容将自动对齐。

卡片标题

这是一张较宽的卡片，下面有支持文本，自然引入了其他内容。此内容稍长一些。

上次更新时间：3 分钟前

卡片标题

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

上次更新时间：3 分钟前

卡片标题

这是一张较宽的卡片，下方有支持文本，作为其他内容的自然引线。此卡片的内容比第一个卡片更长，以显示相等的高度操作。

上次更新时间：3 分钟前

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

卡片堆叠

需要一组相等宽度和高度且彼此不连接的卡片吗？使用卡片组。

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

上次更新时间：3 分钟前

卡片标题

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

上次更新时间：3 分钟前

卡片标题

这是一张较宽的卡片，下方有支持文本，作为其他内容的自然引线。此卡片的内容比第一个卡片更长，以显示相等的高度操作。

上次更新时间：3 分钟前

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

与卡片组一样，组中的卡片页脚将自动对齐。

卡片标题

这是一张较宽的卡片，下面有支持文本，自然引入了其他内容。此内容稍长一些。

上次更新时间：3 分钟前

卡片标题

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

上次更新时间：3 分钟前

卡片标题

这是一张较宽的卡片，下方有支持文本，作为其他内容的自然引线。此卡片的内容比第一个卡片更长，以显示相等的高度操作。

上次更新时间：3 分钟前

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

网格卡片

使用 Bootstrap 网格系统及其 .row-cols 类来控制每行显示多少网格列（环绕您的卡片）。例如，以下是 .row-cols-1 将卡片排列在一列中，而 .row-cols-md-2 将四张卡片平均分配到多行中，从中等断点开始。

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

卡片标题

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

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

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

将其更改为 .row-cols-3，您将看到第四张卡片换行。

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

卡片标题

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

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

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

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

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

卡片标题

这是一张短卡片。

卡片标题

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

卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

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

卡片列

只需使用 CSS 将卡片包装在 .card-columns 中，即可将卡片组织成类似 Masonry 的列。卡片使用 CSS column 属性而不是 flexbox 构建，以便于对齐。卡片从上到下、从左到右排序。

注意！您使用卡片列的里程数可能会有所不同。为了防止卡片跨列断开，我们必须将它们设置为 display: inline-block，因为 column-break-inside: avoid 还没有一个万无一失的解决方案。

换行到新行的卡片标题

这是一张较长的卡片，下方有支持文本，作为其他内容的自然引线。此内容稍长一点。

一个众所周知的引用，包含在引用块元素中。

某位名人，出自 Source Title

卡片标题

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

上次更新时间：3 分钟前

一个众所周知的引用，包含在引用块元素中。

某位名人，出自 Source Title

卡片标题

此卡片有一个常规标题和一个简短的段落文本。

上次更新时间：3 分钟前

一个众所周知的引用，包含在引用块元素中。

某位名人，出自 Source Title

卡片标题

这是另一张带有标题和下方支持文本的卡片。此卡片有一些其他内容，使其整体略高。

上次更新时间：3 分钟前

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

卡片列还可以通过一些其他代码进行扩展和自定义。下面显示的是 .card-columns 类的扩展，它使用我们使用的相同 CSS（CSS 列）来生成一组响应层，以更改列数。

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