Bootstrap/docs/4.5/components/card
来自菜鸟教程
Bootstrap的卡可提供具有多种变体和选项的灵活且可扩展的内容容器。
关于
A card 是一个灵活且可扩展的内容容器。 它包括页眉和页脚选项,各种内容,上下文背景颜色以及强大的显示选项。 如果您熟悉Bootstrap 3,可以用卡片代替我们的旧面板,孔和缩略图。 与这些组件类似的功能可用作卡的修饰符类。
例
卡片的标记和样式尽可能少,但仍能提供大量控制和自定义功能。 它们与flexbox一起构建,可以轻松对齐并与其他Bootstrap组件很好地混合。 他们没有 margin 默认情况下,所以使用 间隔实用程序 如所须。
以下是具有混合内容和固定宽度的基本卡的示例。 卡片没有固定的开始宽度,因此自然会填满其父元素的整个宽度。 这很容易通过我们的各种定制 尺寸选择 .
<div class="card" style="width: 18rem;">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。 </p>
<a class="btn btn-primary" href="#"> 去一个地方 </a>
</div>
</div>内容类型
卡片支持多种内容,包括图像,文本,列表组,链接等。 以下是支持的示例。
Body
卡的基本组成部分是 .card-body 。在卡片中需要填充部分时,请使用它。
这是卡体内的一些文本。
<div class="card">
<div class="card-body"> 这是卡体内的一些文本。 </div>
</div>标题,文字和链接
卡标题通过添加使用 .card-title to a <h*> tag. 以相同的方式,通过添加链接来添加链接并将链接彼此相邻放置 .card-link 到 <a> tag.
通过添加字幕来使用字幕 .card-subtitle to a <h*> tag. 如果 .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 class="card-link" href="#"> 卡链接 </a>
<a class="card-link" href="#"> 另一个链接 </a>
</div>
</div>图片
.card-img-top 将图像放置在卡的顶部。 With .card-text ,可以将文本添加到卡中。 内文字 .card-text 也可以使用标准HTML标记设置样式。
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
<div class="card" style="width: 18rem;">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<p class="card-text"> 一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。 </p>
</div>
</div>清单群组
在具有刷新列表组的卡中创建内容列表。
- Cras justo odio
- 文字填充
- 文字填充
<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"> 文字填充</li>
<li class="list-group-item"> 文字填充</li>
</ul>
</div> 精选
- Cras justo odio
- 文字填充
- 文字填充
<div class="card" style="width: 18rem;">
<div class="card-header"> 精选 </div>
<ul class="list-group list-group-flush">
<li class="list-group-item"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 文字填充</li>
</ul>
</div>- Cras justo odio
- 文字填充
- 文字填充
<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"> 文字填充</li>
<li class="list-group-item"> 文字填充</li>
</ul>
<div class="card-footer"> 卡页脚 </div>
</div>厨房水槽
混合并匹配多种内容类型以创建您需要的卡片,或将所有物品扔在那里。 下面显示的是图像样式,块,文本样式和列表组,它们都包裹在定宽卡中。
<div class="card" style="width: 18rem;">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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"> Cras justo odio </li>
<li class="list-group-item"> 文字填充</li>
<li class="list-group-item"> 文字填充</li>
</ul>
<div class="card-body">
<a class="card-link" href="#"> 卡链接 </a>
<a class="card-link" href="#"> 另一个链接 </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 class="btn btn-primary" href="#"> 去一个地方 </a>
</div>
</div>卡头可以通过添加样式 .card-header to <h*> 元素。
精选
<div class="card">
<h5 class="card-header"> 精选 </h5>
<div class="card-body">
<h5 class="card-title"> 特殊标题处理 </h5>
<p class="card-text"> 在下面提供支持文字,自然而然地引入了其他内容。 </p>
<a class="btn btn-primary" href="#"> 去一个地方 </a>
</div>
</div> 引用
文字填充文字填充文字填充文字填充 整数posere删除前注。
<div class="card">
<div class="card-header"> 引用 </div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
<footer class="blockquote-footer"> 某人在 <cite title="Source 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 class="btn btn-primary" href="#"> 去一个地方 </a>
</div>
<div class="card-footer text-muted"> 2天前 </div>
</div>浆纱
卡没有具体说明 width 开始,因此除非另有说明,否则它们的宽度为100％。 您可以根据需要使用自定义CSS,网格类,网格Sass mixins或实用程序进行更改。
使用网格标记
使用网格,根据需要将卡包装在列和行中。
<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 class="btn btn-primary" href="#"> 去一个地方 </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 class="btn btn-primary" href="#"> 去一个地方 </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 class="btn btn-primary" href="#"> 按键 </a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 在下面提供支持文字,自然而然地引入了其他内容。 </p>
<a class="btn btn-primary" href="#"> 按键 </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 class="btn btn-primary" href="#"> 去一个地方 </a>
</div>
</div>文字对齐
您可以使用我们的快速更改任何卡片的整体或特定部分的文本对齐方式 文字对齐类 .
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"> 特殊标题处理 </h5>
<p class="card-text"> 在下面提供支持文字,自然而然地引入了其他内容。 </p>
<a class="btn btn-primary" href="#"> 去一个地方 </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 class="btn btn-primary" href="#"> 去一个地方 </a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"> 特殊标题处理 </h5>
<p class="card-text"> 在下面提供支持文字,自然而然地引入了其他内容。 </p>
<a class="btn btn-primary" href="#"> 去一个地方 </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="#"> 活性 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title"> 特殊标题处理 </h5>
<p class="card-text"> 在下面提供支持文字,自然而然地引入了其他内容。 </p>
<a class="btn btn-primary" href="#"> 去一个地方 </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="#"> Link </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title"> 特殊标题处理 </h5>
<p class="card-text"> 在下面提供支持文字,自然而然地引入了其他内容。 </p>
<a class="btn btn-primary" href="#"> 去一个地方 </a>
</div>
</div>图片
卡包含用于处理图像的一些选项。 您可以选择在卡的任一端添加“图像上限”,将图像与卡内容叠加在一起,或仅将图像嵌入卡中。
图像帽
与页眉和页脚相似,卡片可以包含顶部和底部的“图像上限”,即图像顶部或底部的图像。
卡标题
这是一张较宽的卡片,带有以下支持文字,是添加其他内容的天然指南。 此内容要长一点。
最近更新3分钟前
卡标题
这是一张较宽的卡片,带有以下支持文字,是添加其他内容的天然指南。 此内容要长一点。
最近更新3分钟前
<div class="card mb-3">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<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>
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-bottom" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
</div>图像叠加
将图片变成卡片背景并覆盖卡片上的文字。 根据图像,您可能需要也可能不需要其他样式或实用程序。
<div class="card bg-dark text-white">
<svg aria-label="Placeholder: Card image" class="bd-placeholder-img bd-placeholder-img-lg card-img" focusable="false" height="270" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 卡图片 </text></svg>
<div class="card-img-overlay">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较宽的卡片,带有以下支持文字,是添加其他内容的天然指南。 此内容要长一点。 </p>
<p class="card-text"> 最近更新3分钟前 </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">
<svg aria-label="Placeholder: Image" class="bd-placeholder-img" focusable="false" height="250" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图片 </text></svg>
</div>
<div class="col-md-8">
<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>卡片样式
卡片包含用于自定义背景,边框和颜色的各种选项。
背景和颜色
Use 文字和背景实用程序 更改卡的外观。
头
主卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
头
副卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
头
成功卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
头
危险卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
头
警告卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
头
信息卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
头
灯卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
头
暗卡标题
一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。
<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-white 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"> 一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。 </p>
</div>
</div>
<div class="card text-white 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 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"> 一些快速的示例文本可在卡片标题上构建,并构成卡片内容的大部分。 </p>
</div>
</div>向辅助技术传达意义
使用颜色添加含义仅提供视觉指示,而不会传达给辅助技术的用户（例如屏幕阅读器）。 确保用颜色表示的信息从内容本身来看是显而易见的（例如 可见的文字）,或通过其他方式（例如, .sr-only 类。
边界
Use 边境设施 改变只是 border-color 卡。 请注意,您可以放 .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 text-warning">
<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 text-info">
<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实用程序
您还可以根据需要更改卡页眉和页脚的边框,甚至删除边框 background-color with .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"> 页脚 </div>
</div>卡布局
除了在卡片中设置内容的样式外,Bootstrap还提供了一些用于布置一系列卡片的选项。 暂且, 这些布局选项尚未响应 .
卡组
使用卡组将卡呈现为具有相等宽度和高度列的单个附加元素。 卡组开始堆叠并使用 display: flex; 从开始就以统一的尺寸附着 sm 断点。
卡标题
这是一张较宽的卡片,带有以下支持文字,是添加其他内容的天然指南。 此内容要长一点。
最近更新3分钟前
卡标题
该卡片下方具有辅助文字,可以自然地引入其他内容。
最近更新3分钟前
卡标题
这是一张较宽的卡片,带有以下支持文字,是添加其他内容的天然指南。 该卡片的内容比第一个显示相同高度动作的卡片更长。
最近更新3分钟前
<div class="card-group">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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>卡套
是否需要一套彼此没有连接的宽度和高度相等的卡片？ 使用卡片组。
卡标题
这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。
最近更新3分钟前
卡标题
该卡片下方具有辅助文字,可以自然地引入其他内容。
最近更新3分钟前
卡标题
这是一张较宽的卡片,带有以下支持文字,是添加其他内容的天然指南。 该卡片的内容比第一个显示相同高度动作的卡片更长。
最近更新3分钟前
<div class="card-deck">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="200" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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-deck">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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">
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
</div>
</div>当您需要相等的高度时,添加 .h-100 卡。 如果默认情况下希望高度相等,则可以设置 $card-height: 100% 在萨斯。
卡标题
这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。
卡标题
这是一张短牌。
卡标题
这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。
卡标题
这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张短牌。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 </p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="180" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 卡标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
</div>
</div>卡列
卡可以组织成 石工 包含CSS的类列,方法是将它们包装在 .card-columns 。卡由CSS制成 column 属性而不是flexbox,以便于对齐。 卡的排列顺序是从上到下,从左到右。
当心！ 您使用信用卡栏的里程可能会有所不同。 为了防止卡片跨列断裂,我们必须将它们设置为 display: inline-block as column-break-inside: avoid 还不是防弹解决方案。
换行的卡片标题
这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。
文字填充文字填充文字填充文字填充 整数posere删除前注。
卡标题
该卡片下方具有辅助文字,可以自然地引入其他内容。
最近更新3分钟前
文字填充文字填充文字填充文字填充 整数位擦除。
卡标题
这张卡的标题为常规标题,下面有简短的文字段落。
最近更新3分钟前
文字填充文字填充文字填充文字填充 整数posere删除前注。
卡标题
这是另一张下方带有标题和支持文字的卡片。 此卡还包含一些其他内容,使其整体上略高。
最近更新3分钟前
<div class="card-columns">
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="160" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<div class="card-body">
<h5 class="card-title"> 换行的卡片标题 </h5>
<p class="card-text"> 这是一张较长的卡片,带有以下支持文字,可以自然地引入其他内容。 此内容要长一点。 </p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
<footer class="blockquote-footer">
<small class="text-muted"> 某人在 <cite title="Source Title"> 资料标题 </cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<svg aria-label="Placeholder: Image cap" class="bd-placeholder-img card-img-top" focusable="false" height="160" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 图像帽 </text></svg>
<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 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p> 文字填充文字填充文字填充文字填充 整数位擦除。 </p>
<footer class="blockquote-footer text-white">
<small> 某人在 <cite title="Source Title"> 资料标题 </cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<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">
<svg aria-label="Placeholder: Card image" class="bd-placeholder-img card-img" focusable="false" height="260" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 卡图片 </text></svg>
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p> 文字填充文字填充文字填充文字填充 整数posere删除前注。 </p>
<footer class="blockquote-footer">
<small class="text-muted"> 某人在 <cite title="Source Title"> 资料标题 </cite>
</small>
</footer>
</blockquote>
</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>
</div>
</div>卡列也可以扩展并使用一些其他代码进行自定义。 下面显示的是 .card-columns 类,我们使用与CSS列相同的CSS来生成一组用于更改列数的响应层。
