<p>应修改 Sass 变量 $spacers 而非直接覆盖 CSS 类，因其是 m-/p- 工具类的唯一数据源；需在导入 Bootstrap 前重定义该 map，保持 key（0–5）不变，推荐使用 rem 单位以保障响应式缩放。</p>
修改 Bootstrap 5 的 $spacers Sass 变量
bootstrap 5 的 m-1、p-2 这类间距工具类，底层依赖 $spacers 这个 sass map 变量。它默认是 (0: 0, 1: .25rem, 2: .5rem, 3: 1rem, 4: 1.5rem, 5: 3rem)。想改大小，必须在导入 bootstrap 样式前重定义它。
常见错误是直接覆盖 CSS 类（比如用 .m-1 { margin: 4px !important }），这会破坏响应式断点逻辑，且无法生成对应的 m-sm-1、mt-lg-2 等变体。
- 在自定义 Sass 文件开头（务必在
@import "bootstrap/scss/functions";之后、@import "bootstrap/scss/variables";之前）重写$spacers - 保持 key 不变（
0到5），只改 value 值，否则工具类会缺失 - 推荐用
rem或em，避免用px—— 否则响应式缩放会失效
$spacers: ( 0: 0, 1: 0.375rem, // 原来是 0.25rem → m-1 现在是 6px（基于 16px 基准） 2: 0.75rem, 3: 1.25rem, 4: 1.875rem, 5: 3.125rem );
为什么不能只改 CSS 类或用 !important
Bootstrap 的间距工具类是通过循环 $spacers 自动生成的。你看到的 m-1、mx-3、pt-5 全部来自同一个源数据。绕过变量直接写 CSS：
- 无法同步影响所有方向（
m-、mt-、mx-等）和所有断点（m-sm-1、m-md-2） - 后续升级 Bootstrap 时，新增的间距类（如 v5.3 加的
m-6）你根本不会得到 -
!important会污染样式优先级，导致在组件内调试困难，尤其和第三方 UI 库混用时容易冲突
如果用 Bootstrap CDN（没 Sass 编译环境）怎么办
没法改 $spacers，就只能接受默认值，或手动补全你需要的类。这不是“hack”，而是现实约束下的合理选择。
- 在 HTML 中加自定义 class，比如
my-custom-m1，然后在<style>里写.my-custom-m1 { margin: 0.375rem; } - 不要试图用 JS 动态重写
m-1的样式表 —— 性能差、不可维护、且对 SSR 不友好 - 如果项目长期用 CDN，建议尽早迁移到 Sass 构建流程，否则每次小调整都要硬编码，越堆越难管
注意 $spacer 和 $spacers 的区别
别混淆这两个变量：$spacer 是单个基础值（默认 1rem），仅用于栅格系统（.container、.row 的 gutters）；而 $spacers 是 map，控制所有 m-*/p-* 工具类。改错地方，边距类完全不会变。
还有人误以为改 $theme-spacer 有用 —— 那是旧版 Bootstrap 4 的变量名，v5 已废弃，设了也没效果。
