CSS如何用Bootstrap实现卡片式布局_使用Card组件封装信息

Card组件必须以.card为根容器，内部嵌套.card-header、.card-body等语义子元素；图片须用.card-img-top作为直接子元素；文字内容需置于.card-body中；自定义样式优先使用--bs-card-bg等CSS变量。

Card组件必须用.card作为根容器

Bootstrap的Card不是靠CSS类名自由组合出来的，.card是强制起点——没它，其他.card-body、.card-title都失效。常见错误是只加.card-body或直接套.p-3模仿卡片，结果响应式断点、内边距、阴影全乱。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 所有卡片HTML必须以<div class="card">开头，闭合也要完整
• .card内部才能合法嵌套.card-header、.card-body、.card-footer等语义子元素
• 如果需要网格排列，.card应放在.row + .col-* 里，而不是给.card本身加display: grid

图片顶部显示要配.card-img-top，别用img-fluid硬撑

把图片塞进Card时，很多人用<img class="img-fluid">然后手动加margin，结果在小屏上图片溢出、圆角丢失、和文字间距错乱。真正该用的是.card-img-top——它不只是样式，还参与了Card的内部流式计算。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 图片必须是.card的**直接子元素**，且紧跟在.card开头后，才能被.card-img-top正确识别
• 不要给.card-img-top单独设width或height，它依赖父级.card的宽度自动缩放
• 如果图片需要居中裁剪（比如头像），得额外加object-fit: cover，.card-img-top本身不处理这个

卡片内文字对齐和间距靠.card-body，不是靠text-center或mb-2

直接在.card-title上加text-center或mb-3看似能调样式，但一换主题、一升级Bootstrap版本就容易失效——因为.card-body才是Bootstrap定义卡片内容区垂直节奏的“锚点”。它内置了padding、font-size继承逻辑和子元素默认间距。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• .card-title、.card-text这些必须放在.card-body里，否则margin-bottom可能被重置为0
• 想统一多张卡片的文字行高？改.card-body的line-height比挨个调.card-text更可靠
• 如果删掉.card-body只留.card + .card-title，你会发现.card-title的上下间距变小，字体也变轻——这是Bootstrap 5+的默认行为

自定义卡片背景或边框时，优先覆盖--bs-card-bg CSS变量

用background-color: #f8f9fa硬写死颜色，会和Bootstrap暗色模式冲突，也不适配data-bs-theme="dark"。现代Bootstrap（v5.3+）推荐用CSS变量接管，这样主题切换时能自动响应。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 在.card上设style="--bs-card-bg: #eef2ff;"，比写bg-primary更可控
• 如果要用渐变背景，background: linear-gradient(...)必须配合--bs-card-bg: transparent，否则会被变量覆盖
• 修改--bs-card-border-color可以统一边框，但注意：某些卡片变体（如.card-outline-primary）会忽略它，得单独处理

卡片布局看着简单，但.card的语义层级、变量依赖和子元素顺序稍有偏差，就会让响应式、主题、打印样式全掉链子。别跳过官方文档里那句“Cards are built with flexbox”——它真不是客气话。