Bootstrap 5如何自定义组件间距_通过CSS变量(Variables)重写框架默认值
Bootstrap 5 间距工具类底层仅依赖 --bs-spacer 变量（影响所有档位基数），--bs-spacers 是 Sass map，不可运行时覆盖；组件内建间距则使用独立变量（如 --bs-navbar-padding-y），需单独调整。
Bootstrap 5 的间距工具类（如 mb-3、px-4）底层依赖哪些 CSS 变量？
所有间距工具类都由 --bs-spacer 和 --bs-spacers 这两个 CSS 变量驱动。前者是基础单位（默认 0.25rem），后者是一个 map 类型的自定义属性，定义了从 0 到 5（以及 auto）各档缩放系数对应的像素值。
比如 mt-3 实际编译为：margin-top: calc(0.25rem * 3) —— 但这个计算发生在 Bootstrap 源码的 Sass 层；CSS 运行时只看到最终的 px/rem 值。真正可 runtime 覆盖的是 --bs-spacer（影响所有档位的基数），而 --bs-spacers 必须在 Sass 编译期重定义，纯 CSS 无法动态改写它。
-
--bs-spacer是唯一可在:root中安全覆盖的间距基础变量 -
--bs-spacers是 Sass map，不能用style或:root直接赋值，否则无效 - 如果你用的是 Bootstrap 官方 CDN 或已编译的
bootstrap.min.css，只能动--bs-spacer
如何用 --bs-spacer 安全放大/缩小全部间距工具类？
直接在 :root 中修改即可，所有 m*/p* 类会自动响应。例如把基础单位从 0.25rem 改为 0.375rem（即放大 1.5 倍）：
:root { --bs-spacer: 0.375rem;}
注意：这个改动会影响 所有 间距档位（1→0.375rem，2→0.75rem，3→1.125rem…），不是线性缩放整个 scale，而是改变基数。
立即学习“前端免费学习笔记（深入）”；
- 设为
0.125rem会让mx-1变成0.125rem，比默认更紧凑 - 设为
1rem会让pb-5达到5rem，慎用于移动端 - 不要设为
0或负值，部分工具类（如mx-auto）内部逻辑会失效
想单独调整某档间距（比如让 my-4 更大，但不动 my-3）怎么办？
没法靠 CSS 变量直接做到——因为 --bs-spacers 不支持运行时重写。此时必须放弃工具类，手写 utility class 或覆盖特定选择器。
推荐做法：在项目 CSS 中追加一条高优先级规则，精确命中目标类名：
.my-4 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important;}
或者用更稳妥的方式，避免 !important：
[class*="my-4"] { margin-top: 2.5rem; margin-bottom: 2.5rem;}
- 不要试图用
:root { --bs-spacers: ... }覆盖，它会被忽略 - 如果用 Sass 构建项目，应在
$spacers变量处重定义整个 map，再重新编译 CSS - 单独调整某档时，务必检查是否与其他组件（如
card、modal）的内建间距冲突
为什么改了 --bs-spacer，某些组件（如 navbar）的内边距没变？
因为那些组件的 padding/margin 是硬编码在组件样式里的，不走间距工具类，也不读 --bs-spacer。比如 .navbar 的 padding 来自 --bs-navbar-padding-y 等独立变量。
这类组件需单独覆盖其专属 CSS 变量：
:root { --bs-spacer: 0.375rem; --bs-navbar-padding-y: 1.25rem; /* 原默认是 0.5rem */ --bs-card-spacer-y: 1.5rem; /* 原默认是 1rem */}
- 每个组件的 spacing 相关变量名不同，需查 Bootstrap 5 官方 CSS 变量文档
- 变量命名有规律：通常含
-padding-、-margin-、-spacer-等关键词 - 浏览器 DevTools 的 Computed 面板能快速定位某个元素实际用了哪个变量
改 --bs-spacer 看似简单，但组件内建间距和工具类间距是两套体系，容易只调了一半。真要统一控制，得同时盯住变量列表和组件源码里那些硬写的数值。
