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">开头，闭合也要完整<li> <code>.card内部才能合法嵌套.card-header、.card-body、.card-footer等语义子元素 - 如果需要网格排列，
.card应放在.row+.col-*里，而不是给.card本身加display: grid - 图片必须是
.card的**直接子元素**，且紧跟在.card开头后，才能被.card-img-top正确识别 - 不要给
.card-img-top单独设width或height，它依赖父级.card的宽度自动缩放 - 如果图片需要居中裁剪（比如头像），得额外加
object-fit: cover，.card-img-top本身不处理这个 -
.card-title、.card-text这些必须放在.card-body里，否则margin-bottom可能被重置为0 - 想统一多张卡片的文字行高？改
.card-body的line-height比挨个调.card-text更可靠 - 如果删掉
.card-body只留.card+.card-title，你会发现.card-title的上下间距变小，字体也变轻——这是Bootstrap 5+的默认行为 - 在
.card上设style="--bs-card-bg: #eef2ff;"，比写bg-primary更可控 - 如果要用渐变背景，
background: linear-gradient(...)必须配合--bs-card-bg: transparent，否则会被变量覆盖 - 修改
--bs-card-border-color可以统一边框，但注意：某些卡片变体（如.card-outline-primary）会忽略它，得单独处理
图片顶部显示要配.card-img-top，别用img-fluid硬撑
把图片塞进Card时，很多人用<img class="img-fluid" alt="CSS怎么用Bootstrap实现卡片式布局_使用Card组件封装信息" >然后手动加margin，结果在小屏上图片溢出、圆角丢失、和文字间距错乱。真正该用的是.card-img-top——它不只是样式，还参与了Card的内部流式计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
卡片内文字对齐和间距靠.card-body，不是靠text-center或mb-2
直接在.card-title上加text-center或mb-3看似能调样式，但一换主题、一升级Bootstrap版本就容易失效——因为.card-body才是Bootstrap定义卡片内容区垂直节奏的“锚点”。它内置了padding、font-size继承逻辑和子元素默认间距。
实操建议：
立即学习“前端免费学习笔记（深入）”；
自定义卡片背景或边框时，优先覆盖--bs-card-bg CSS变量
用background-color: #f8f9fa硬写死颜色，会和Bootstrap暗色模式冲突，也不适配data-bs-theme="dark"。现代Bootstrap（v5.3+）推荐用CSS变量接管，这样主题切换时能自动响应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
卡片布局看着简单，但.card的语义层级、变量依赖和子元素顺序稍有偏差，就会让响应式、主题、打印样式全掉链子。别跳过官方文档里那句“Cards are built with flexbox”——它真不是客气话。
