Getting startedAccessibility（无障碍）Browsers and devices（浏览器和设备）Build tools（构建工具）Contents（内容）Download（下载）JavaScriptTheming Bootstrap（主题Bootstrap）WebpackComponents: AlertsAlerts（警报）Components: BadgesBadges（徽章）Components: BreadcrumbBreadcrumbComponents: Button groupButton group（按钮组）Components: ButtonsButtons（按钮）Components: CardsComponents: CarouselCards（卡）Carousel（圆盘传送带）Components: CollapseCollapse（折叠）Components: DropdownsDropdowns（下拉菜单）Components: FormsForms（表单）Components: Input groupInput group（输入群组）Components: Input groupJumbotron（广告大屏幕）Components: List groupList group（列表组）Components: ModalModal（互动视窗）Components: NavbarNavbar（导航栏）Components: NavsNavs（导航栏）Components: PaginationPagination（分页）Components: PopoversPopovers（弹出框）Components: ProgressProgress（进度条）Components: ScrollspyScrollspy（滚动监听）Components: TooltipsTooltips（提示工具）ContentCode（代码）Figures（图片区）Images（图片）Reboot（重置）Tables（表格）Typography（排版）LayoutGrid（网格）Layout（布局）Media object（多媒体对象）Utilities for layout（排版通用类别）MigrationMigrating to v4（迁移到v4）UtilitiesBorders（边框）Clearfix（清除浮动）Close icon（关闭图标）Colors（颜色）Display property（显示属性）Embeds（内嵌）Flex（弹性）Float（浮动）Image replacement（图像替换）Position（位置）Screenreaders（荧幕阅读器）Sizing（尺寸）Spacing（间隔）Text（文本）Vertical alignment（垂直对齐）Visibility（能见度）
©
本文档使用
php.cn手册 发布
文字
Bootstrap 的卡片提供了一个灵活且可扩展的内容容器，包含多种变体和选项。
关于
一个卡片是一个灵活的，可扩展的内容容器。它包括页眉和页脚的选项，各种内容，上下文背景颜色以及强大的显示选项。
如果您熟悉 Bootstrap 3，卡片可以替换我们的旧面板、水井和缩略图。与这些组件类似的功能可作为卡片的修饰符类使用。
示例
卡片尽可能少的标记和样式，但仍然设法提供大量的控制和定制。使用 flexbox 构建，它们可以轻松对齐并与其他 Bootstrap 组件良好混合。
以下是具有混合内容和固定宽度的基本卡片的示例。卡片没有固定的宽度开始，所以它们自然会填充其父元素的整个宽度。这很容易通过我们的各种尺寸选项进行定制。
<div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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: 20rem;"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <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: 20rem;"> <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>
<div class="card" style="width: 20rem;"> <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>
厨房水槽-Kitchen sink
混合并匹配多种内容类型来创建您需要的卡片，或将所有内容都扔到那里。下面显示的是图像样式，块，文本样式和列表组 - 全部用固定宽度卡包装。
<div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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"> <h4 class="card-title">Special title treatment</h4> <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"> <h4 class="card-header">Featured</h4> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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"> <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>
<div class="card text-center"> <div class="card-header"> Featured </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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 mixins 或实用程序来更改此设置。
使用网格标记
使用网格，根据需要将卡片打包成行和列。
<div class="row"> <div class="col-sm-6"> <div class="card"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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"> <h4 class="card-title">Special title treatment</h4> <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"> <h4 class="card-title">Card title</h4> <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"> <h4 class="card-title">Card title</h4> <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: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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: 20rem;"> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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="#">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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="#">Disabled</a> </li> </ul> </div> <div class="card-body"> <h4 class="card-title">Special title treatment</h4> <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 mb-3"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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"> <h4 class="card-title">Card title</h4> <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 class="card-img-bottom" src="..." alt="Card image cap"></div>
图像叠加
将图像转换成卡片背景并覆盖卡片的文字。根据图像，您可能需要也可能不需要其他样式或实用程序。
<div class="card bg-dark text-white"> <img class="card-img" src="..." alt="Card image"> <div class="card-img-overlay"> <h4 class="card-title">Card title</h4> <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>
卡片样式
卡片包括用于自定义背景，边框和颜色的各种选项。
背景和颜色
使用文本和背景实用程序更改卡的外观。
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Primary card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Secondary card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Success card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Danger card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Warning card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Info card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Light card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Dark card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-primary"> <h4 class="card-title">Primary card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-secondary"> <h4 class="card-title">Secondary card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-success"> <h4 class="card-title">Success card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-danger"> <h4 class="card-title">Danger card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-warning"> <h4 class="card-title">Warning card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-info"> <h4 class="card-title">Info card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body"> <h4 class="card-title">Light card title</h4> <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: 20rem;"> <div class="card-header">Header</div> <div class="card-body text-dark"> <h4 class="card-title">Dark card title</h4> <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 实用程序
您还可以更改卡上的页眉和页脚所需的边界，甚至用.bg-transparent删除替换其background-color。
<div class="card border-success mb-3" style="max-width: 20rem;"> <div class="card-header bg-transparent border-success">Header</div> <div class="card-body text-success"> <h4 class="card-title">Success card title</h4> <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;来实现统一大小。
<div class="card-group"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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>
当使用带有页脚的卡片组时，其内容将自动排列。
<div class="card-group"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-deck"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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>
就像卡片组一样，卡片组中的卡片脚将自动排队。
<div class="card-deck"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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>
卡片列
卡片可以通过将它们包裹进 CSS 中，只用 CSS 来组织成类似 Masonry的列.card-columns。卡片是使用 CSS column属性而不是 Flexbox 构建的，以便于对齐。卡片从上到下和从左到右排列。
抬头！卡列的里程可能会有所不同。为了防止卡片跨栏，我们必须将它们设置display: inline-block为column-break-inside: avoid不是防弹解决方案。
<div class="card-columns"> <div class="card"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title that wraps to a new line</h4> <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 class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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"> <small> Someone famous in <cite title="Source Title">Source Title</cite> </small> </footer> </blockquote> </div> <div class="card text-center"> <div class="card-body"> <h4 class="card-title">Card title</h4> <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 class="card-img" src="..." alt="Card image"> </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"> <h4 class="card-title">Card title</h4> <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>
卡片列也可以扩展和定制一些额外的代码。下面显示的是.card-columns类使用与 CSS 列相同的 CSS 的类的扩展——生成一组用于更改列数的响应层。
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4; }
@include media-breakpoint-only(xl) {
column-count: 5; }}