卡片内边距不生效需先确认是否被.card-body覆盖；.card默认无padding，实际padding由.card-body提供；应优先调整.card-body的padding类或移除.card-body后直接设置.card的padding。
卡片内边距不生效？先确认是否被 .card-body 覆盖
Bootstrap 的 .card 默认不设内边距，真正提供 padding 的是子元素 .card-body。直接给 .card 加 .p-3 通常没用——因为内容实际在 .card-body 里，而它的 padding 是独立定义的（默认 1.25rem）。
常见错误现象：div.card.p-5 看不出变化，但 div.card-body.p-5 却撑开了。
- 正确做法：优先调整
.card-body的 padding 类，比如.p-2、.p-4 - 如果想统一控制整个卡片视觉留白，可移除
.card-body，把内容直插.card，再加.p-3等类 - 注意：移除
.card-body后，原生的垂直居中、字体大小等样式会丢失，需手动补
需要不同方向内边距？用方向专属 utility 类
Bootstrap 的 padding 工具类支持按方向拆分，比全局 .p-* 更精准，尤其适合卡片头部/底部留白不一致的场景。
使用场景：标题区要更多上边距、操作按钮区要更多下边距，但中间内容区域保持紧凑。
立即学习“前端免费学习笔记（深入）”；
-
.pt-4：仅顶部 padding（1.5rem） -
.pb-2：仅底部 padding（0.5rem） -
.ps-3/.pe-3：左右（start/end，适配 RTL） - 避免混用
.p-3和.pt-4——后者会覆盖前者，最终只生效.pt-4
自定义 padding 值时，别绕过 Bootstrap 的 spacing scale
Bootstrap 的 $spacers 默认是 (0, 0.25, 0.5, 1, 1.5, 3)（单位 rem），所有 .p-* 类都基于这个序列生成。硬写 style="padding: 7px" 看似快，但会破坏响应式一致性，也难维护。
性能与兼容性影响：非标准值无法享受 Bootstrap 的断点响应能力（如 .pt-md-5），且可能在 Safari 或旧版 Edge 中触发重排异常。
- 推荐方案：在 SCSS 中扩展
$spacers，比如追加7: 0.4375rem（≈7px），然后编译出.p-7 - 临时调试可用
!important+style，但上线前务必回归 utility 类体系 - 检查是否真需要像素级控制——多数设计系统用 rem 更稳
卡片嵌套时 padding 叠加导致过度留白
常见于 .card 内含 .card（如仪表盘小卡片组），外层 .card-body.p-3 + 内层 .card-body.p-2 容易让内容“陷进去了”。
容易踩的坑：开发者习惯性给每层都加 padding，结果视觉节奏全乱，而且移动端更明显。
- 解决方案一：内层卡片改用
.card.border-0.bg-transparent，并移除其.card-body，直接用.p-0控制 - 解决方案二：用负 margin 抵消，比如内层加
.mt-n2，但仅限微调，不宜超过-1级别 - 关键判断点：打开浏览器开发者工具，逐层检查 computed padding，而不是凭感觉调
最常被忽略的是卡片 footer 的 .card-footer 自带 padding-y: 0.75rem，它和 .card-body 的 padding 不是同一套 scale，混用时留白会不均——这点连很多老手都会漏看。
