在GitHub上查看

卡片

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

本页导航↓

简介

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

示例

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

以下是具有混合内容和固定宽度的基本卡的示例。 卡片没有固定的开始宽度，因此自然会填满其父元素的整个宽度。 我们的各种卡片大小选择均可轻松定制。

Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
<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。 在卡片中需要填充部分时，请使用它。

This is some text within a 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> 标记，可以添加链接并将其相邻放置。

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

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link 
<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标记来设置样式。

Placeholder Image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

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

组列表

在一组卡片中创建一个内容列表。

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Featured
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card footer 
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>

栅格

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

Placeholder Image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link 
<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">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

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

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<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*> 的元素来设置样式

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<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>
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title 
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
2 days ago 
<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%宽的。您可以根据需要使用自定义样式、网格类、gridsass mixin或实用工具来更改它。

使用网格标记

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<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>

使用实用工具

使用我们少数可用的大小调整实用工具来快速设置卡片的宽度。

Card title

With supporting text below as a natural lead-in to additional content.

Button
Card title

With supporting text below as a natural lead-in to additional content.

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

使用自定义样式

在样式表中使用自定义样式或将其用作嵌入式样式来设置宽度。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<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>

文本对齐

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

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<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-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>

使用引导工具的导航组件为卡的标题（或块）添加一些 nav components。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<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" href="#" tabindex="-1" 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>
Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere 
<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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

图片

卡包含用于处理图像的一些选项。 您可以选择在卡的任一端添加“图像上限”，将图像与卡内容叠加在一起，或仅将图像嵌入卡中。

添加标题

与页眉和页脚类似，卡片可以包括顶部和底部的“图像帽”——卡片顶部或底部的图像。

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Placeholder Image cap 
<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>

文字堆叠

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

Placeholder Card image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<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>
请注意，内容不应大于图像的高度。如果内容大于图像，则内容将显示在图像外部。

水平对齐

使用网格和实用工具类的组合，卡片可以以便于移动和响应的方式水平制作。在下面的示例中，我们使用.g-0 删除网格槽，并使用 .col-md-* 类使卡在md 断点处保持水平。根据您的卡内容，可能需要进一步调整。

Placeholder Image
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<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>

卡片样式

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

背景和颜色

使用 文本和背景实用工具更改卡的外观。

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<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-dark 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-dark 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-dark 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>
向辅助技术传达意义

使用颜色来增加意义只能提供视觉上的指示，而不能传达给辅助技术的用户，比如屏幕阅读器。确保由颜色表示的信息从内容本身（例如可见文本）中是明显的，或者是通过其他方法包括的，例如用 .visually-hidden 类隐藏的附加文本。

卡片边框

使用边框实用工具仅更改卡的边框颜色。注意，您可以将 .text-{color} 类放在父集 .card 或卡片内容的子集上，如下所示。

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

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

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

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

卡片布局

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

卡片组

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

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Placeholder Image cap
Card title

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.

Last updated 3 mins ago

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

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

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Placeholder Image cap
Card title

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.

Last updated 3 mins ago 
<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>

网格卡片

使用引导网格系统及其 .row-cols 类来控制每行显示多少个网格列（环绕在卡片上）。例如，这里的 .row-cols-1 将卡片放在一列上， .row-cols-md-2 将四张卡片从中间断点向上分割成多行的等宽。

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

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

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

当你需要等高时，在卡片上加 .h-100 。如果默认情况下想要等高，可以在Sass中设置 $card-height: 100% 。

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Placeholder Image cap
Card title

This is a short card.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Placeholder Image cap
Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

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

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

Placeholder Image cap
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago
Placeholder Image cap
Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago
Placeholder Image cap
Card title

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.

Last updated 3 mins ago 
<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-muted">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-muted">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-muted">Last updated 3 mins ago</small>
  </div>
</div>
</div>
</div>

砌体结构

在 v4 中，我们使用了一种CSS-only技术来模拟类似 砖石的柱的行为，但是这种技术带来了很多不愉快的 副作用。如果您想在 v5中使用这种类型的布局，您可以使用Masonry插件。Bootstrap中不包括Masonry ，但我们提供了一个演示示例来帮助您入门。