Card内外边距不能直接写死px值，因为会破坏响应式布局：小屏撑破容器、大屏空旷，且在栅格嵌套中易导致换行错乱；应使用Bootstrap响应式间距工具类（如mx-md-3）、flex gap或CSS变量统一管理。
Card卡片的内外边距为什么不能直接写死px值？
因为固定px值在小屏上会撑破容器、大屏上又显得空旷——Bootstrap的响应式设计核心就是让间距随视口变化。直接写margin: 16px或padding: 20px会破坏栅格流，尤其在col-md-4这类列内嵌套Card时，左右外边距叠加容易导致换行错乱。
用Bootstrap内置间距工具类（spacing utilities）最稳妥
Bootstrap 5+ 提供了基于rem的响应式间距工具，命名规则为{property}{side}-{breakpoint}-{size}，比如mx-md-3表示中屏及以上才生效的水平外边距（3对应1rem）。
-
mx-2：所有屏幕水平外边距0.5rem（8px） -
mx-md-3：≥768px时水平外边距1rem（16px），小屏保持mx-2 -
p-3 p-lg-4：默认内边距1rem，≥992px时升级为1.5rem - 避免混用
mb-0和mb-md-3——后者会覆盖前者，调试时用浏览器检查器看最终计算值
Card内部元素（如img、body）的间距需单独控制
Card的.card-img-top和.card-body默认没有垂直间距，靠margin-bottom硬加会破坏响应逻辑。正确做法是给.card-body加pt-0（去掉顶部内边距），再用mt-n3向上微调位置，或直接用gap（需父容器设display: flex; flex-direction: column）。
<div class="card h-100">
<img src="..." class="card-img-top">
<div class="card-body d-flex flex-column gap-2">
<h5 class="card-title">标题</h5>
<p class="card-text mb-0">正文</p>
</div>
</div>注意：gap在Flex布局下才生效，Grid布局用gap同理，但Card默认不是Grid容器。
自定义CSS变量时必须覆盖所有断点
如果项目里重写了--bs-gutter-x或--bs-spacer，务必同步更新--bs-spacer-xs到--bs-spacer-xl系列变量——Bootstrap 5.3+ 的间距工具类依赖这些变量生成媒体查询。漏掉--bs-spacer-sm会导致px-sm-2在平板上失效，且无报错提示。
真正麻烦的是Card嵌套场景：比如card-group里多个Card并排，其子Card的mx-* 类会和card-group自身的负边距冲突，这时得用ms-0 me-0清掉子Card的左右外边距，改由card-group统一控制间隙。
