垂直间距应优先用 mt-/mb-而非 my-，避免塌陷；响应式选 mt-md-4 更安全；pt-/pb-适合内部留白但注意高度影响；工具类不足时应修改 CSS 变量。
垂直间距类（mt/mr/mb/ml/mx/my）怎么选才不踩坑
垂直方向的外边距，只用 mt-（margin-top）和 mb-（margin-bottom），别碰 my-——它看似省事，但会在所有断点下同时作用于上下，容易导致移动端留白爆炸或卡片叠穿。比如给卡片加 my-4，在小屏堆叠时上下各 1.5rem，视觉上就“飘”了。
常见错误现象：mb-3 加在最后一个 .row 上，结果底部空隙消失；其实是父子 margin 塌陷——父容器没 border/padding，子元素的 mb-3 和父容器默认 margin 合并了。解决方法：给父容器加 overflow: hidden 或极小 padding（pt-0.01 不行，得写成 pt-1 再配合自定义 CSS）。
- 优先把间距加在「下一个兄弟元素」上，比如在
<div class="row"></div>后面那个<div>加mt-4，比给前一个row加mb-4更稳 -
mt-0和mb-0要慎用，它们会清掉 Bootstrap 默认的段落、标题等组件自带的底部留白，可能让文字贴到上一个卡片边缘 - 响应式场景下，用
mt-md-4比mt-4更安全——小屏不加，中屏起效，避免移动端内容被顶出视口
为什么 pt-/pb- 有时比 mt-/mb- 更合适
padding 不会塌陷，也不依赖父容器是否“干净”，所以当你需要稳定控制某一块区域内部呼吸感时，pt-3 和 pb-3 是更可预测的选择。典型场景：卡片内容区顶部留白、模态框 body 内容与边框之间空隙。
但要注意：pt- 会撑高父容器高度，如果父容器有固定 max-height 或 flex: 1，可能触发滚动条或截断内容；而 mt- 是“悬浮式”的，不影响父容器尺寸计算。
- 表单控件组（
.form-group）之间用mb-3，但整个表单容器顶部用pt-4，这样既保持组内节奏，又隔离外部干扰 - 导航栏下方内容区第一块，推荐用
pt-5而非mt-5，避免和 navbar 的 margin 叠加造成“双倍空白” - 不要用
pb-0强行压掉 footer 上方空隙——footer 自身通常带mt-5，清掉 padding 反而让内容紧贴 footer 边框
Bootstrap 间距系统的三个硬伤，你得提前知道
它不是万能胶，尤其在复杂嵌套或定制化强的项目里，三处限制最常让人回头手写 CSS：
- 尺寸档位只有 0–5 + auto，没有 6、7 或 0.5 这类中间值；想实现 20px 空隙？
mb-3是 1.5rem ≈ 24px，mb-2是 1rem ≈ 16px——中间差那 4px 就得自己加 class 或变量覆盖 - 负间距（如
mt-n2）能拉近元素，但会破坏打印样式（媒体查询里没重置）、影响屏幕阅读器焦点顺序，还可能让按钮点击热区重叠 - 响应式前缀（
md-、lg-）只对已声明的断点生效；如果你加了xl-但项目没启用$grid-breakpoints: xl，这个类就完全不生效，浏览器开发者工具里都看不到对应样式
什么时候该放弃工具类，直接改 CSS 变量
当你的项目里超过 3 处以上需要统一调整某个间距层级（比如所有卡片底部空隙从 mb-4 改成 mb-5），或者设计系统明确要求“主区间距 = 24px”，就别一个个改 class 了。直接动 --bs-spacer 变量更干净。
Bootstrap 5 底层靠 $spacers Sass map 生成工具类，你可以重定义：
$spacers: ( 0: 0, 1: .25rem, 2: .5rem, 3: .75rem, 4: 1.5rem, // 原来是 1rem，这里改成 1.5rem = 24px 5: 3rem );
改完重新编译 CSS。注意：这会影响所有 m-/p- 类，包括 mx-auto 的计算逻辑，所以 mx-auto 居中行为不会变，但周围留白会同比放大。
真正容易被忽略的是 gutter——列间距（.g-3）不走 $spacers，它由 $grid-gutter-width 单独控制，调间距时别漏掉这一块。
