直接改 $spacers 变量最稳妥，因其是 bootstrap 5+ 间距工具类（如 mt-3、px-5）的唯一源头，修改后所有方向前缀和响应式变体（如 pt-lg-6）自动适配，避免手动补类导致的响应失效、语义割裂和升级冲突。
修改 Bootstrap 的 $spacer 变量是核心入口
Bootstrap 的所有边距类（如 mt-3、px-2）都源自 SCSS 变量 $spacer 和其衍生的 $spacers 映射表。直接改 $spacer 值（默认为 1rem）会影响整个比例尺，比如设成 0.5rem 后，mb-4 就变成 2rem 而不是原来的 4rem。
实操建议：
- 在自定义 SCSS 文件（如
_custom.scss）中，先于 引入 Bootstrap 的scss/bootstrap.scss之前定义：$spacer: 0.75rem;<br>$spacers: (<br> 0: 0,<br> 1: $spacer * 0.5,<br> 2: $spacer,<br> 3: $spacer * 1.5,<br> 4: $spacer * 2,<br> 5: $spacer * 3<br>);
- 不要只改
$spacer却忽略重定义$spacers—— 否则ms-1这类小数值类会失效（Bootstrap 5+ 默认$spacers是基于原始$spacer计算的） - 若用 CSS 版本（非源码编译），无法修改这些变量，只能覆盖生成后的类，不推荐
覆盖已生成的 Utility 类要精准选择器权重
如果无法重新编译 SCSS（例如项目里只用了 CDN 引入的 CSS），就得用 CSS 覆盖。但注意：Bootstrap 5 的边距类都是 [class*="m-"], [class*="p-"] 这类属性选择器，权重不高，容易被意外覆盖或反过来被其他样式压住。
常见错误现象：.mt-2 { margin-top: 0.625rem !important; } 写了但没生效 —— 很可能是加载顺序错，或被更高权重规则（如内联 style 或 ID 选择器）压制。
实操建议：
- 确保你的覆盖 CSS 在 Bootstrap CSS 之后 加载
- 用更具体的选择器提升权重，例如：
body .mt-2 { margin-top: 0.625rem; }比单纯.mt-2更稳 - 避免通配覆盖（如
[class^="m-"]），它会误伤你可能想保留的个别类（比如me-0）
按需生成新边距值比硬覆盖更可持续
有时你只是需要一个 Bootstrap 原生没有的值（比如 mb-7 对应 3.5rem），而不是全量替换。这时直接扩展 $spacers 比覆盖所有类更轻量、可维护。
使用场景：设计系统要求「间距阶梯」含 7 级，但 Bootstrap 默认只到 5 或 6。
实操建议：
- 在自定义 SCSS 中扩展映射：
$spacers: map-merge($spacers, (<br> 6: $spacer * 4,<br> 7: $spacer * 4.5<br>));
- 确保调用
@import "bootstrap/scss/utilities";（或至少utilities/_spacing.scss）—— 它会读取更新后的$spacers并生成对应类 - 别漏掉
$theme-spacers（如果用了theme-colors相关扩展逻辑），不过纯边距一般不涉及
修改后务必检查响应式断点下的表现
Bootstrap 的响应式边距类（如 mt-md-3、ps-lg-0）是基于同一套 $spacers + 断点配置生成的。改了基础 $spacers，所有断点下的对应类都会同比例缩放，但如果你只扩展了某几级（比如加了 8 却没加 md-8），就会出现断点间行为不一致。
容易被忽略的地方：
- 运行
npm run build（或相应构建命令）后，检查浏览器开发者工具里是否真生成了mt-xl-7这类类名 —— 有时候 SCSS 编译缓存会导致新增项没出现 - 在小屏设备上测试
mx-sm-4是否仍符合预期，因为sm断点下若未显式定义该层级，会回落到非响应式版本（mx-4），而后者可能已被你改过 - 如果用了 Bootstrap 的 RTL 支持（
dir="rtl"），ms-/me-类的行为会翻转，确认扩展值在 RTL 下语义依然正确
