最稳方式是直接修改:root中的css自定义变量，如--bs-spacer（默认1rem）可全局缩放所有mt-/px-等工具类间距，--bs-gutter-x/y控制栅格间隙，--bs-pagination-margin-x等组件变量需单独覆盖，旧版5.0–5.2不支持须升级或改用sass。
直接改 :root 里的 CSS 自定义变量最稳，别碰 margin/padding 工具类或零散重写——否则响应式、组件联动、维护成本全崩。
全局间距比例靠 --bs-spacer 变量，不是工具类
Bootstrap 5.3+ 把基础间距单位抽成了 --bs-spacer（默认 1rem），所有 mt-3、px-4 这类工具类的计算都基于它。改这个变量，所有工具类会自动按比例缩放。
- 生效范围：所有内置间距工具类（
mx-*、pb-*等），但不包括手动写的margin/padding值 - 正确写法：
:root { --bs-spacer: 0.875rem; }→ 所有mt-3从1rem变成0.875rem - 错误写法：
.my-btn { margin-bottom: 0.875rem; }→ 只影响这一个，且无法响应式 - 注意：旧版 Bootstrap 5.0–5.2 不支持该变量，必须升级或退回到 Sass 变量
$spacer编译
--bs-gutter-x 和 --bs-gutter-y 控制栅格间隙
行与列之间的“槽宽”由这两个变量决定，不是靠 mx-* 或负 margin 硬调。它们直接影响 .row 的 margin 和 .col 的 padding 计算逻辑。
-
--bs-gutter-x：控制水平间隙（如.row的margin-left/right和.col的padding-left/right） -
--bs-gutter-y：控制垂直间隙（.row的margin-top/bottom） - 改完后，
.container内部的栅格对齐不会破，因为负 margin 和 padding 是联动重算的 - 常见误操作：给
.row直接加gap: 1rem→ 会和 Bootstrap 的 gutter 机制冲突，导致双倍空白
组件级间距变量要单独覆盖
全局 --bs-spacer 不会影响卡片、分页、导航栏等组件内部的专用间距——它们用各自变量，比如：
-
--bs-card-spacer-y/--bs-card-spacer-x→ 控制.card-body内边距 -
--bs-pagination-margin-x→ 控制分页项之间水平间距（仅 5.3+） -
--bs-navbar-padding-y→ 控制导航栏上下内边距 - 这些变量必须显式重写，例如：
.my-navbar { --bs-navbar-padding-y: 0.5rem; } - 漏掉它们，就会出现“全局缩了，但卡片还是胖、分页还是挤”的割裂感
为什么不能只靠工具类批量替换？
写一堆 mt-2 mt-md-3 mb-1 看似灵活，实际掩盖了设计系统的一致性。更关键的是：
- HTML 里塞满工具类后，根本分不清哪是结构、哪是视觉修饰
- 响应式断点叠加时（如
mb-0 mb-md-3），一旦改全局比例，这些组合不会自动适配新基数 - 组件内部（如
.btn的padding）压根不走工具类路径，只能靠变量或直接覆盖 - 调试时 computed styles 显示的 margin/padding 值来源混乱，很难溯源是哪个变量或哪条规则在起作用
真正要调“比例”，就得从变量源头下手；想局部微调，就用对应组件变量；别指望工具类能扛起整套间距体系——它只是快捷入口，不是底盘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
