直接改--bs-gutter-x或--bs-gutter-y最轻量推荐，因不依赖sass编译；不能直接改.row的margin或.col的padding，否则破坏负边距与正内边距配对机制，导致内容偏移、换行错乱。
直接改 --bs-gutter-x 或 --bs-gutter-y 是最轻量、最推荐的方式，它不依赖 Sass 编译，也不需要动源码，适用于运行时动态调整或局部覆盖。
为什么不能直接改 .row 的 margin 或 .col 的 padding
Bootstrap 5 的列间距靠 .row 的负 margin 和 .col 的正 padding 配对实现。单独重置 .row 的 margin（比如写 .row { margin: 0; }）会破坏这个配对机制：.col 的 padding 还在，但没了负 margin 抵消，整行内容会向左偏移，小屏下还容易换行错乱。
常见错误现象包括：
- 列看起来“挤在一起”但实际右侧留白异常
- 响应式断点切换时列突然换行或宽度错位
- DevTools 里看到
.col的padding-left和padding-right各为 1rem，但.row的margin-left却是 0
如何用 CSS 变量精准控制单个 row 的水平/垂直间距
gx-* 和 gy-* 类本质就是给 .row 设置 --bs-gutter-x 或 --bs-gutter-y，优先级高于全局变量，且无需编译。
-
gx-0→--bs-gutter-x: 0，彻底清空列间水平间隙 -
gy-2→--bs-gutter-y: 0.5rem，控制多行之间垂直距离 -
g-3→ 同时设--bs-gutter-x和--bs-gutter-y为1rem - 响应式写法如
gx-md-4表示从md断点（≥768px）起生效，值为1.5rem
注意：这些类必须加在 <div class="row ..."> 上，加在 <code>.col 或外层容器上完全无效。
手动设置 CSS 变量的注意事项
如果你需要 JS 动态控制或覆盖默认值，可以直接操作 --bs-gutter-x，但要注意几个关键点：
- 作用域要明确——写在
:root会影响所有用到该变量的组件（如list-group、accordion），建议限定在特定容器内，例如.my-grid .row { --bs-gutter-x: 0.75rem; } - IE11 不支持 CSS 变量，若需兼容，得加回退值：
margin-right: -0.75rem; margin-right: calc(var(--bs-gutter-x) * -0.5); - 别用
px-3类模拟 gutter：它只加.col的 padding，不抵消.row的负 margin，结果是整行左偏 15px - 真正影响“列之间”的是 gutter；如果列内文字贴边，该调的是
.col内部的px-3，而不是碰gx-
什么时候才该动 Sass 变量 $grid-gutter-width
只有当项目中几十个 .row 都要统一改成某个固定值（比如全站列间距改为 12px），才值得走 Sass 重编译流程。但这三件事漏一不可：
-
$grid-gutter-width: 0.75rem必须写在所有@import语句之前 - 必须重新编译整个 Bootstrap（不能只 import 部分模块）
- 若自定义了断点（如新增
xl2: 1400px），还得同步调用@include generate-gutter-classes()，否则gx-xl2-3这类类名压根不会生成
最容易被忽略的是：局部调整永远优先用 gx-* 类；Sass 变量是全局行为，一旦修改就得接受整套构建流程的约束，不是改个数字就能跑起来的事。
