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