Source

牌

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通过将 a 添加到<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>

列出组

使用刷新列表组在卡片中创建内容列表。

Cras justo odio
Dapibus ac facilisis in
爱神前庭

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

精选

Cras justo odio
Dapibus ac facilisis in
爱神前庭

<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
爱神前庭

卡链接另一个链接

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

页眉和页脚

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

精选

特殊标题处理

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

去一个地方

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

引用

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人

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

精选

特殊标题处理

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

去一个地方

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

特殊标题处理

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

去一个地方

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

图片

卡片包括一些处理图像的选项。选择在卡片的任一端附加“图像大写”、使用卡片内容覆盖图像或简单地将图像嵌入卡片中。

图片上限

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

卡片标题

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

最后更新 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-top" 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="..." class="card-img" 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>

Mixins 实用程序

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

标题

成功卡标题

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

页脚

<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;实现其统一大小。

卡片标题

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

最后更新 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到卡片中。如果你想要默认等高，你可以$card-height: 100%在 Sass 中设置。

卡片标题

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

卡片标题

这是一张短卡。

卡片标题

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

卡片标题

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

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

卡片栏

卡片可以通过将它们包裹在.card-columns. 卡片是用 CSScolumn属性而不是 flexbox 构建的，以便于对齐。卡片的顺序是从上到下，从左到右。

小心！您的卡列里程可能会有所不同。为了防止卡片跨越列，我们必须将它们设置display: inline-block为column-break-inside: avoid还不是防弹解决方案。

换行的卡片标题

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人

卡片标题

此卡片在下面有支持文本，作为附加内容的自然引导。

最后更新 3 分钟前

Lorem ipsum dolor sit amet, consectetur adipiscing elit。整数值。

源标题中著名的人

卡片标题

这张卡片有一个常规的标题和下面的一小段文字。

最后更新 3 分钟前

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer pouere 表示赌注。

源标题中著名的人

卡片标题

这是另一张卡片，下面有标题和支持文字。这张卡片有一些额外的内容，使其整体略高。

最后更新 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</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-top" alt="...">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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;
  }
}