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

关于

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

例子

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

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

<div class="card" style="width: 18rem;">
  <img src="images/gallery/1.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">东京梦华录</h5>
    <p class="card-text">是宋代孟元老的笔记体散记文，创作于宋钦宗靖康二年（1127年），是一本追述北宋都城东京开封府城市风俗人情的著作。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

内容类型

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

body

卡片的构建块是 .card-body。每当您需要卡片中的填充部分时使用它。

<div class="card">
  <div class="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">东西晋演义</h5>
    <h6 class="card-subtitle mb-2 text-muted">杨尔曾</h6>
    <p class="card-text">《东西晋演义》（又题《绣象东西晋全志》），明杨尔曾撰，历史演义小说。分为《西晋演义》和《东晋演义》两部。 十二卷五十回。</p>
    <a href="#" class="card-link">阅读详细</a>
    <a href="#" class="card-link">立即购买</a>
  </div>
</div>

图片

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

<div class="card" style="width: 18rem;">
  <img src="images/gallery/2.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">柳迎征骑邗沟近，日掩京城帝里迢。八乌已看成六翮，一飞直欲薄云霄！</p>
  </div>
</div>

列出组

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

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">第一个选项</li>
    <li class="list-group-item">第二个选项</li>
    <li class="list-group-item">第三个选项</li>
  </ul>
</div>

<div class="card" style="width: 18rem;">
  <div class="card-header">
    精选
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">第一个选项</li>
    <li class="list-group-item">第二个选项</li>
    <li class="list-group-item">第三个选项</li>
  </ul>
</div>

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">第一个选项</li>
    <li class="list-group-item">第二个选项</li>
    <li class="list-group-item">第三个选项</li>
  </ul>
  <div class="card-footer">
    卡片页脚
  </div>
</div>

Kitchen sink

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

<div class="card" style="width: 18rem;">
  <img src="images/gallery/3.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">施公案</h5>
    <p class="card-text">又名《五女七贞》，清代民间通俗公案小说。</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">第一个选项</li>
    <li class="list-group-item">第二个选项</li>
    <li class="list-group-item">第三个选项</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">阅读详细</a>
    <a href="#" class="card-link">立即购买</a>
  </div>
</div>

页眉和页脚

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

<div class="card">
  <div class="card-header">
    精选
  </div>
  <div class="card-body">
    <h5 class="card-title">晋书</h5>
    <p class="card-text">中国的二十四史之一，唐房玄龄等人合著，作者共二十一人。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

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

<div class="card">
  <h5 class="card-header">精选</h5>
  <div class="card-body">
    <h5 class="card-title">狄公案</h5>
    <p class="card-text">清末长篇公案小说，作者名已佚，共六卷六十四回。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

<div class="card">
  <div class="card-header">
    引用
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>大明正德年间礼部尚书冯旭，风流倜傥，喜获五美相伴，万种风情，百般欢畅，正是：云鬃蓬松起战场，花园锦簇布刀枪。</p>
      <footer class="blockquote-footer">摘自 <cite title="《五美缘》">《五美缘》</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    精选
  </div>
  <div class="card-body">
    <h5 class="card-title">反唐演义全传</h5>
    <p class="card-text">书续两辽王薛丁山子薛刚，好打抱不平，结怨甚多。因酒醉误将太子踢死，逃出城外。武后大怒，待临朝执政，下令满门抄斩。由此引发了一场反唐故事。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
  <div class="card-footer text-muted">
    2 天前
  </div>
</div>

尺寸

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

使用网格标记

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

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">十七史百将传</h5>
        <p class="card-text">是一部中国古代的名将的传记。又称《百将传》、《正百将传》，是北宋东光（今河北省东光县）人张预（字公立）用了数年时间编写的。</p>
        <a href="#" class="btn btn-primary">阅读详细</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">南北史演义</h5>
        <p class="card-text">该书叙述了南北朝一百七十年间由分裂到对峙统一的史实，观点平实，内容丰富，论述有法，用语雅洁，自评自注，理趣兼备，洵为通俗史著的经典。</p>
        <a href="#" class="btn btn-primary">阅读详细</a>
      </div>
    </div>
  </div>
</div>

使用实用程序

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

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">两晋演义</h5>
    <p class="card-text">本书以章回体结构，通俗的文章，机智的点评，真实再现了中华文明历史演进波澜壮阔的进程，叙述了晋代的兴亡。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>
<br/>
<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">五代史演义</h5>
    <p class="card-text">共有六十回，起于朱全忠建立后梁，终于赵匡胤代周建立宋朝。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

使用自定义 CSS

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

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">元史演义</h5>
    <p class="card-text">本书以章回体结构，通俗的文章，机智的点评，真实再现了中华文明历史演进波澜壮阔的进程，叙述了元代的兴亡。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

文本对齐

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

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">前汉演义</h5>
    <p class="card-text">以演义体小说的笔法使得历史具有强烈的故事性，真实地再现了秦、西汉两朝波澜壮阔的历史，描摹了一段段英雄与时势的壮阔史诗。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">后汉演义</h5>
    <p class="card-text">这是一部以正史为经，轶闻为纬，体例特殊，自批自注的演义巨作。全书文笔亲切自然，通俗易懂。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">唐史演义</h5>
    <p class="card-text">《唐史演义》共有一百回李氏先祖对北方各国的特别贡献，在隋朝末年纷乱局面中得以保存实力，一举赢得天下。</p>
    <a href="#" class="btn btn-primary">阅读详细</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" aria-current="true" href="#">选中的</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">禁用的</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">宋史演义</h5>
    <p class="card-text">本书以章回体结构，通俗的文章，机智的点评，真实再现了中华文明历史演进波澜壮阔的进程，叙述了宋代的兴亡。</p>
    <a href="#" class="btn btn-primary">阅读详细</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="#">选中的</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">已禁用</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">明史演义</h5>
    <p class="card-text">（即《明史通俗演义》）为《历代通俗演义》之一。共有一百回，自平民皇帝朱元璋开国，终至明思宗殉国，经历276年。</p>
    <a href="#" class="btn btn-primary">阅读详细</a>
  </div>
</div>

图片

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

图片上限

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

<div class="card">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">清史演义</h5>
    <p class="card-text">共有一百回，起于满清之源起，终于宣统帝逊位，凡294年。</p>
    <p class="card-text"><small class="text-muted">上次更新是在3分钟前</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">民国演义</h5>
    <p class="card-text">由蔡东藩、许廑父所著。该书采用章回体，蔡东藩原著前一百二十回，许廑父续写四十回，共一百六十回。</p>
    <p class="card-text"><small class="text-muted">上次更新是在3分钟前</small></p>
  </div>
  <img src="..." class="card-img-bottom" alt="...">
</div>

图像叠加

将图像变成卡片背景并覆盖卡片的文字。根据图像，您可能需要也可能不需要其他样式或实用程序。

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">观音菩萨传奇</h5>
    <p class="card-text">主要叙述观音身世、刻苦修行与济世救人的故事。</p>
    <p class="card-text">上次更新是在3分钟前</p>
  </div>
</div>

水平的

使用网格和实用程序类的组合，可以以移动友好和响应式的方式将卡片设置为水平。在下面的示例中，我们使用 .g-0 删除网格排水沟并使用 .col-md-* 类使卡片在 md 断点处水平。根据您的卡片内容，可能需要进一步调整。

<div class="card" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">说岳全传</h5>
        <p class="card-text">是清代钱彩编次、金丰增订的长篇英雄传奇小说，最早刊本为金氏余庆堂刻本，共20卷80回。</p>
        <p class="card-text"><small class="text-muted">上次更新是在3分钟前</small></p>
      </div>
    </div>
  </div>
</div>

卡片样式

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

背景和颜色

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

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">镜花缘</div>
  <div class="card-body">
    <h5 class="card-title">主色</h5>
    <p class="card-text">其神幻诙谐的创作手法数经据典，奇妙地勾画出一幅绚丽斑斓的天轮彩图。</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">隋史遗文</div>
  <div class="card-body">
    <h5 class="card-title">次要颜色</h5>
    <p class="card-text">本书为英雄传奇小说，秦琼与程咬金等是书中的主要人物，隋末唐初的帝王将相反居于次要地位。</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">隋唐演义</div>
  <div class="card-body">
    <h5 class="card-title">成功颜色</h5>
    <p class="card-text">一部具有英雄传奇和历史演义双重性质的小说。以隋末农民起义为故事背景，讲述隋朝覆灭与大唐建立的一段历史演义。</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">隋书</div>
  <div class="card-body">
    <h5 class="card-title">危险颜色</h5>
    <p class="card-text">全书共八十五卷，其中帝纪五卷，列传五十卷，志三十卷。</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">阅微草堂笔记</div>
  <div class="card-body">
    <h5 class="card-title">警告颜色</h5>
    <p class="card-text">原名《阅微笔记》，是清朝翰林院庶吉士出身的纪昀于乾隆五十四年（1789年）至嘉庆三年（1798年）间以笔记形式所编写成的文言短篇志怪小说。</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">钟吕传道集</div>
  <div class="card-body">
    <h5 class="card-title">信息颜色</h5>
    <p class="card-text">又名《真仙传道集》或《钟吕传道记》。五代，施肩吾整理。</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">郁离子</div>
  <div class="card-body">
    <h5 class="card-title">浅色</h5>
    <p class="card-text">集中反应了作为政治家的刘伯温治国安民的主张，也反映了他的人才观、哲学思想、经济思想、文学成就、道德为人以及渊博学识。</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">辽史</div>
  <div class="card-body">
    <h5 class="card-title">黑色</h5>
    <p class="card-text">元修《辽史》共116卷，包括本纪30卷，志32卷，表8卷，列传45卷，以及国语解1卷。</p>
  </div>
</div>

边框

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

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">英烈传</div>
  <div class="card-body text-primary">
    <h5 class="card-title">主色</h5>
    <p class="card-text">又名《云合奇踪》、《皇明英烈传》、《皇明开运英武传》等，章回体小说，全书分为十卷。</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">老残游记续集</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">次要颜色</h5>
    <p class="card-text">描写了丁已年冬月信在北京前门外蝶圆，有东阁子、西圆公来访，谈及近日朝廷整顿新政，满街都是巡兵。</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">老残游记</div>
  <div class="card-body text-success">
    <h5 class="card-title">成功颜色</h5>
    <p class="card-text">小说以一位走方郎中老残的游历为主线，对社会矛盾开掘很深，尤其是他在书中敢于直斥清官（清官中的酷吏）误国，清官害民，独具慧眼地指出清官的昏庸常常比贪官更甚。</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">农政全书</div>
  <div class="card-body text-danger">
    <h5 class="card-title">危险颜色</h5>
    <p class="card-text">基本上囊括了中国明代农业生产和人民生活的各个方面，而其中又贯穿着一个基本思想，即徐光启的治国治民的“农政”思想。</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">绿野仙踪</div>
  <div class="card-body">
    <h5 class="card-title">警告颜色</h5>
    <p class="card-text">是一本世情小说更多于志怪小说。冷于冰在其成仙的道路上，收徒并且帮助其亲人弟子诛杀为祸世间的妖怪。</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">白虎通义</div>
  <div class="card-body">
    <h5 class="card-title">信息颜色</h5>
    <p class="card-text">又称《白虎通》，是中国汉代讲论五经同异，统一今文经义的一部重要著作。</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">白蛇传</div>
  <div class="card-body">
    <h5 class="card-title">浅色</h5>
    <p class="card-text">是根据清代雍乾时期编撰的传奇故事《雷峰塔》与民间传说《白蛇传》而改编的清代四部神魔小说之一。</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">东南纪事</div>
  <div class="card-body text-dark">
    <h5 class="card-title">黑色</h5>
    <p class="card-text">该书专记南明唐王、鲁王及其臣下的历史，反映了南明抗清的一些重要史实。资料丰富，取舍谨严，为清初稗史中的上乘之作。</p>
  </div>
</div>

Mixins 实用程序

您还可以根据需要更改卡片页眉和页脚的边框，甚至可以使用 .bg-transparent 删除它们的背景色。

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">东周列国志</div>
  <div class="card-body text-success">
    <h5 class="card-title">冯梦龙</h5>
    <p class="card-text">这部小说由古白话写成，主要描写了从西周宣王时期直到秦始皇统一六国这五百多年的历史。</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

卡片布局

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

卡组

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

<div class="card-group">
  <div class="card">
    <img src="images/gallery/4.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">东林列传</h5>
      <p class="card-text">收录了与东林书院、东林学派相关的一百八十多人的传记。</p>
      <p class="card-text"><small class="text-muted">3分钟前更新</small></p>
    </div>
  </div>
  <div class="card">
    <img src="images/gallery/5.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">东汉演义</h5>
      <p class="card-text">清代的清远道人的《东汉演义》。</p>
      <p class="card-text"><small class="text-muted">3分钟前更新</small></p>
    </div>
  </div>
  <div class="card">
    <img src="images/gallery/6.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">东汉秘史</h5>
      <p class="card-text">自王莽出身起，叙述东汉十二帝的更替，着重光武中兴的故事。本书依《全汉志传》、《两汉开国中兴传志》的架构，稍作补充。</p>
      <p class="card-text"><small class="text-muted">3分钟前更新</small></p>
    </div>
  </div>
</div>

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

<div class="card-group">
  <div class="card">
    <img src="images/gallery/7.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">东西汉演义</h5>
      <p class="card-text">自清远道人重编后，嘉庆同文堂本、同治善成堂本《东西汉演义》，均是将甄伟《西汉演义》与清远道人重编《东汉演义》合刊在一起。</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">3分钟前更新</small>
    </div>
  </div>
  <div class="card">
    <img src="images/gallery/9.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">东观汉记</h5>
      <p class="card-text">记载东汉光武帝至汉灵帝一段历史的纪传体史书。因官府于东观设馆修史而得名。它经过几代人的修撰才最后成书。</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">3分钟前更新</small>
    </div>
  </div>
  <div class="card">
    <img src="images/gallery/10.jpg" class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">两同书</h5>
      <p class="card-text">由罗隐所写，流传至今的中国古籍。</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">3分钟前更新</small>
    </div>
  </div>
</div>

网格卡

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

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="images/gallery/1.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">中华古今注</h5>
        <p class="card-text">此书以考证名物制度为主，体例与崔豹《古今注》大致相同，二书部分内容重复。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="images/gallery/2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">中华民国史事日志</h5>
        <p class="card-text">是书篇帙浩繁，作为研究中华民国史的工具书，有一定的参考价值。但错误颇多，诚如编著者生前所云：“惟仍须修正”。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="images/gallery/3.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">中吴纪闻</h5>
        <p class="card-text">南宋地方风土掌故笔记。六卷。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="images/gallery/4.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">中庸</h5>
        <p class="card-text">是一篇论述儒家人性修养的散文，原是《礼记》第三十一篇，相传为子思所作，是一部儒家学说经典论著。</p>
      </div>
    </div>
  </div>
</div>

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="images/gallery/5.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">五虎平南</h5>
        <p class="card-text">承续《征西》故事，同文堂刋本。四十二回。叙述狄青等五虎将南征平叛的故事。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="images/gallery/6.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">佛国记</h5>
        <p class="card-text">《佛国记》一卷，全文13980字，全部记述作者公元399至413年的旅行经历，体裁是一部典型的游记，也属佛教地志类著作。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="images/gallery/7.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">儒林外史</h5>
        <p class="card-text">热情地歌颂了少数人物以坚持自我的方式所作的对于人性的守护，从而寄寓了作者的理想。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="images/gallery/8.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">何典</h5>
        <p class="card-text">是一部用吴方言写的借鬼说事的清代讽刺小说。</p>
      </div>
    </div>
  </div>
</div>

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="images/gallery/9.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">仙杂记</h5>
        <p class="card-text">本书序由天复所写，全书编写历经四年。书文主要记载古人的相关事迹，包括《云仙散录》、《容斋随笔》等。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="images/gallery/10.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">伯牙琴</h5>
        <p class="card-text">以老庄为代表的道家思想为武器，猛烈抨击现实社会。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="images/gallery/1.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">倩女离魂</h5>
        <p class="card-text">元郑光祖据以改编为《迷青琐倩女离魂》，以优美的文笔，从两个方面叙写了女子在礼教抑制下精神的痛苦。</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="images/gallery/2.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">僧宝传</h5>
        <p class="card-text">禅宗自六祖以後，分而为二。一曰青原，其下为曹洞、云门、法眼；一曰南岳，其下为临济、沩仰。是为五宗。</p>
      </div>
    </div>
  </div>
</div>

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

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="images/gallery/3.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">元史</h5>
        <p class="card-text">是系统记载元朝兴亡过程的一部纪传体断代史，成书于明朝初年，由宋濂（1310～1381年）、王袆（1321～1373年）主编。</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">3分钟前更新</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="images/gallery/4.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">全唐文</h5>
        <p class="card-text">全称《钦定全唐文》，是清嘉庆年间官修唐五代文章总集。全书一千卷，并卷首四卷，辑有唐朝、五代十国文章共18488篇（一说20025篇）、作者3042人（一说3035人），每一位作者都附有小传。</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">3分钟前更新</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="images/gallery/5.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">八仙得道</h5>
        <p class="card-text">主要讲述了铁拐李、钟离权、吕洞宾、张果老、蓝采和、何仙姑、韩湘子、曹国舅八位神仙修炼得道的详尽过程。</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">3分钟前更新</small>
      </div>
    </div>
  </div>
</div>

Masonry

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