Bootstrap卡片基本结构必须以.card为最外层容器，内部紧接.card-img-top（或-bottom），再包裹.card-body，其中标题用.card-title、正文用.card-text，缺一不可，否则内边距、行高、间距等默认样式失效。
Bootstrap 卡片布局不用手写 CSS 框架层样式，直接用 .card 及其配套类就能快速搭出响应式、语义清晰的卡片，但容易卡在边距控制、图片比例和响应式断点适配上。
卡片基本结构怎么写才不漏关键类
Bootstrap 的 .card 不是“容器+内容”二元结构，而是有明确层级语义：必须包裹 .card-body（否则内边距失效），标题用 .card-title（不是 自己加 class），文本用 .card-text。漏掉这些类会导致 padding、line-height、margin 等默认样式丢失。
常见错误现象：card 内容贴边、字体大小异常、上下间距消失。
-
.card是最外层容器，必须存在 -
.card-img-top或.card-img-bottom仅用于直接子元素图片，且需紧邻.card-body才能正确计算边距 -
.card-footer要放在最后，否则会破坏 flex 布局顺序
<div class="card">
@@##@@
<div class="card-body">
<h5 class="card-title">标题</h5>
<p class="card-text">正文</p>
</div>
<div class="card-footer">底部</div>
</div>
多卡片并排时如何避免换行错乱
用 .row + .col-* 是最稳的方式，别直接对 .card 加 float 或 display: inline-block —— Bootstrap 5 已弃用 float，且 inline-block 会因换行符产生不可控间隙。
使用场景：网格列表、仪表盘、商品展示。
- 在
.row里放多个.col-md-4，每行自动三列（md 断点起） - 如果卡片高度不一致，加
.h-100到每个.card，让它们等高 - 不要依赖
.card-deck（Bootstrap 4 中已废弃，5 中完全移除）
<div class="row"> <div class="col-md-4"><div class="card h-100">...</div></div> <div class="col-md-4"><div class="card h-100">...</div></div> <div class="col-md-4"><div class="card h-100">...</div></div> </div>
图片变形、裁剪或圆角怎么安全控制
.card-img-top 默认不设宽高约束，图片宽高比不对时会拉伸；object-fit 是解法，但 IE 不支持，所以得配合 class 或自定义 CSS。
性能影响：不设 height 的图片可能引发 CLS（累积布局偏移）。
- 强制统一尺寸：给图片加
width="100%" height="180"（注意保留宽高比或设object-fit: cover） - 圆角只加在图片上：用
.rounded-top（不是.card上），否则边框会切掉阴影 - 如需背景图代替
.card-img-overlay+background-image，但需手动处理文字对比度
自定义颜色和阴影为什么加了没反应
Bootstrap 5 的 .bg-* 类（如 .bg-primary）作用于 .card 时，会覆盖默认背景色，但 .card-body 的文字颜色不会自动反色——得手动加 .text-white 或用 .text-bg-primary（Bootstrap 5.3+ 新增）。
阴影方面：.shadow-sm / .shadow / .shadow-lg 必须加在 .card 上，加在 .card-body 无效，因为阴影是 box-shadow，作用对象必须是块级容器本身。
- 深色背景配浅色文字：优先用
.text-bg-dark，比.bg-dark .text-white更可靠 - 取消默认边框：加
.border-0，别只靠.shadow模拟，否则打印时边框仍存在 - 悬停动效要自己写：Bootstrap 不提供
:hover阴影增强，得加 CSS.card:hover { box-shadow: ... }
真正麻烦的是卡片内容动态加载后高度变化导致的网格错位，这时候 h-100 也不顶用，得用 JS 监听或 CSS grid 替代 row/col —— 但那就超出 Bootstrap 原生卡片的舒适区了。
