Bootstrap卡片必须以.card为根容器，否则.card-body等子类失效；.card-img-top须为.card直接子元素；文字内容须包裹在.card-body中；推荐用CSS变量而非class控制主题样式。
Bootstrap卡片必须以.card为根容器，否则所有子类（如.card-body、.card-img-top）都会失效——这不是可选项，是CSS作用域强制要求。
为什么.card不能省，也不能换位置
Bootstrap的Card样式依赖.card作为flex容器和样式锚点：它定义了阴影、圆角、内边距基线、响应式断点行为。一旦漏掉或写成div.card-body开头，.card-title的上下间距会归零，.card-img-top失去垂直流式控制，小屏下图片溢出、文字贴边就成常态。
常见错误现象：
- 只加
.card-body模拟卡片，结果在暗色模式下背景不切换 - 把
.card套在.row外面，导致网格列宽被撑满、卡片无法等高 - 用
display: grid直接作用于.card，破坏内部flex布局逻辑
实操建议：
-
.card必须是卡片HTML的最外层<div>，且不能嵌套在另一个<code>.card里 - 多卡片并排时，把
.card放进.row > .col-*结构里，而不是给.card加width - 需要固定高度？用
min-height或h-100作用于.card，别碰.card-body的height - 图片包在
<figure></figure>或<div class="img-wrapper">里，导致顶部留白异常、小屏溢出 <li>给<code>.card-img-top设width: 100%或max-width，反而破坏Bootstrap内置的流式约束 - 用
object-fit: cover但没配height，图片被拉伸或截断 - 图片标签必须是
.card的第一个子节点：<div class="card"> <img class="card-img-top" ... alt="Bootstrap卡片布局示例 Card组件常见用法" ><div class="card-body">...</div> </div> - 需要头像级居中裁剪？加
style="object-fit: cover; height: 200px;"到<img alt="Bootstrap卡片布局示例 Card组件常见用法" >上，别依赖.card-img-top本身 - 不想让图片参与高度计算？改用
.card-img-overlay配合position: absolute，但需手动处理z-index - 删掉
.card-body，只留.card > .card-title，结果标题字体变细、行距变小 - 在
.card-title上硬加mb-4，换主题后间距错乱 - 多张卡片文字行数不同，导致卡片高度参差不齐
- 所有文字内容（含
<h5></h5>、<p></p>、<ul></ul>）必须放在.card-body内 - 统一多卡片文字高度？在
.card-body上设min-height或h-100，再配合d-flex flex-column+justify-content-between - 想微调行高？改
.card-body的line-height，比逐个调.card-text更稳定 - 用
bg-dark text-white做深色卡片，但在暗色模式下变成黑底黑字 - 加
shadow-lg后发现暗色模式下阴影太淡，又不敢删 - 渐变背景被
--bs-card-bg默认值覆盖，只显示一半 - 设纯色背景：
<div class="card" style="--bs-card-bg: #f0f8ff;"> <li>设渐变背景：<code>style="--bs-card-bg: transparent; background: linear-gradient(135deg, #e0f7fa, #bbdefb);" - 改边框：
style="--bs-card-border-color: rgba(0,0,0,.15); --bs-card-border-width: 2px;"
.card-img-top必须是.card的直接子元素
不是“放在卡片里就行”，而是必须紧接在.card开标签后、且无其他兄弟元素隔开——否则.card-img-top的自动缩放、圆角裁剪、与.card-body的间距计算全部失效。
常见错误现象：
实操建议：
.card-body是文字节奏的唯一可信锚点
.card-title和.card-text单独存在时，它们的margin-bottom会被重置为0；只有包裹在.card-body里，才能继承Bootstrap定义的垂直节奏（包括padding、line-height、子元素默认间距）。
常见错误现象：
实操建议：
自定义背景/边框优先用CSS变量而非class
硬写bg-primary或border-success会和data-bs-theme="dark"冲突；Bootstrap 5.3+ 推荐通过--bs-card-bg、--bs-card-border-color等CSS变量接管样式，主题切换时自动响应。
常见错误现象：
实操建议：
真正难的是卡片高度对齐和暗色模式下的图片渲染——这两处没有现成class兜底，得靠min-height + object-fit + CSS变量组合控制，稍不注意就跨设备错位。
