真正生效且安全的栅格间距控制方式只有三类：使用gx-/gy-工具类、动态设置css变量--bs-gutter-x/--bs-gutter-y，或重编译sass变量；gutter类必须作用于.row上，且需注意断点规则完整性与变量优先级。
直接改 .col 的 padding 或给 .row 加 margin 会破坏栅格对齐，真正生效且安全的方式只有三类：用 gx-/gy- 工具类、动态设置 CSS 变量 --bs-gutter-x/--bs-gutter-y、或重编译 Sass 变量（仅限构建项目）。
gutter 类必须加在 .row 上才有效
Bootstrap 5 的列间距靠 .row 的负 margin 和 .col 的正 padding 配对实现，这个机制只对 .row 的**直接子元素是 .col** 时起作用。
-
<div class="row gx-3"> <div class="col-6">A</div> <div class="col-6">B</div> </div>✅ 正确：gx-3同时调整.row的负左右边距和每个.col的左右内边距 -
<div class="col-6 gx-3">A</div>❌ 无效：DevTools 里根本看不到--bs-gutter-x变量被注入 - React-Bootstrap 等封装组件要确认是否把
className透传到原生<div class="row">，否则类名被吃掉等于没加<h3>响应式 gutter 要用 <code>gx-{breakpoint}-{size}组合写想实现“小屏无间隙、中屏 1rem、大屏 1.5rem”，不能只写
gx-md-3 gx-lg-4——缺了兜底规则，xs 断点仍用默认gx-2（0.5rem）。- 必须显式写出：
gx-0 gx-md-3 gx-lg-4 - 断点名严格匹配
xs/sm/md/lg/xl/xxl，写成gx-sx-2或g-small-3会被忽略 - 顺序无关，但缺一不可；后声明的断点规则会覆盖前面的
- 自定义断点（如新增
xs: 0, sm: 480px）必须同步调用@include generate-gutter-classes()，否则gx-xs-2类压根不会编译出来
运行时动态调整优先用
--bs-gutter-x变量这是最轻量、无需 Sass 编译的方式，适合局部覆盖或 JS 动态控制。
- 直接在
.row上设内联样式：style="--bs-gutter-x: 1.25rem;" - 或在父级容器上设：
<div style="--bs-gutter-x: 0.75rem;"><div class="row">...</div></div> - 该变量优先级高于全局 Sass 变量，且会被
gx-类覆盖（即gx-3生成的--bs-gutter-x: 1rem会压制父级设置） - 别在
:root里盲目覆盖--bs-gutter-x——它会压制所有gx-类效果，排查时先看 DevTools 里变量来源
别用
px-或mx-模拟 gutter这类操作只动
.col的 padding/margin，不抵消.row的负 margin，结果一定是布局失衡。-
px-3→.col左右各加 1rem，但.row仍带 -1rem 负边距 → 整行向左偏移 1rem -
ms-4→ 第二列右移，小屏下可能因总宽度超限导致换行失效或右侧留白 - 清空 gutter 别用
no-gutters——它是 Bootstrap 4 废弃类，5 里已彻底移除，写了也无效 - 真正清零用
gx-0（仅水平）、gy-0（仅垂直）、g-0（水平+垂直）
最容易被忽略的是：gutter 控制的是「列之间」的空隙，不是「内容与列边框之间」的距离。如果文字贴边，该调的是
.col内部的p-3或自定义padding，而不是去碰gx-——后者一动，整个栅格对齐基线就偏了。 - 必须显式写出：
