Card内边距必须用p-类，别碰.card的margin；Card自身无默认内边距，内容紧贴边框，p-、px-、py-等padding类才控制内容与边框距离，响应式需“移动优先”显式定义基础值。
Card内边距必须用p-*类，别碰.card的margin
card自身没有默认内边距，所有内容紧贴边框；直接改.card的margin只会让卡片整体偏移，对内部留白毫无作用。真正该操作的是p-*、px-*、py-*这类padding工具类——它们控制的是标题、文本、图片离卡片边框的距离。
常见错误现象：
– 给.card加了mx-4，结果卡片左右缩进，但内部文字还是贴边
– 用mt-3想拉开顶部空白，却导致背景图下移（margin折叠所致）
– 在.card-group上写py-5，整个组被撑开，但卡片之间依然无间隙
-
p-2从xs（0px）起生效，是所有断点的兜底值 -
px-sm-3在≥576px时生效，控制左右内边距为1rem -
py-md-4在≥768px时生效，上下内边距设为1.5rem - 多个类可共存：
p-1 py-md-3 py-xl-5→ 小屏0.25rem → 中屏1rem → 超大屏3rem
响应式内边距要“移动优先”，漏写基础类就失效
Bootstrap不支持“覆盖式”写法，py-lg-4不会自动回退到小屏值；它只在≥992px生效，其他尺寸下完全不加载规则。所以你必须显式提供小屏入口——比如先写py-2，再叠加py-md-3和py-lg-4。
为什么py-sm-2在手机竖屏没反应？因为多数手机宽度py-sm-2只在@media (min-width: 576px)里生效。这时候py-2才是真正在起作用的那个。
- 调试时看DevTools的Computed Styles，确认
padding-top最终来自哪条规则 - 如果看到被划掉，大概率是漏写了基础类，或自定义CSS加载顺序错了
- 确保Bootstrap CSS在你自己的样式之前引入，否则
p-*类可能被后续规则覆盖
卡片组里调内边距，别动.card-group
.card-group是flex容器，它本身没有内边距，改px-3或py-4只会撑开容器外框，卡片之间依然紧贴。你要的“卡片间距”和“卡片内容留白”是两回事，不能混用。
正确做法分两层：
– 控制卡片之间空隙：用gap-3或gap-lg-4直接加在.card-group上（Bootstrap 5.3+原生支持）
– 控制卡片内部留白：给每个.card加p-3或px-4 py-3
-
gap-2适用于小屏紧凑布局，gap-lg-4在≥992px时扩大间距 - 避免用
me-3逐个给卡片加右外边距——RTL下会出问题，且维护成本高 - 如果项目还在用Bootstrap 5.2或更早版本，退回
.card:not(:first-child) { margin-left: 1rem; }并确保.card-group是display: flex
背景图+内边距组合时，警惕margin折叠干扰
当你给.card加了mt-4又设了背景图，会发现图片整体下移——这不是bug，是margin-top和父容器发生折叠，把整个卡片的渲染位置拉下来了。这时候padding才是安全选择。
真正需要控制的是卡片内容与边框的距离，不是卡片与上一个兄弟元素的距离。尤其在React组件中嵌套.container时，这种折叠会层层传导，最终影响顶部导航栏背景定位。
- 删掉
mt-*，改用pt-4或py-3作用于.card自身 - 如果必须保留外边距逻辑，把
.card包进一层<div class="pt-4">，让padding作用在父容器上 <li>切勿用负padding（如<code>padding-top: -1rem）试图“收缩”，它只会把内容挤出边界
