<p>gx- 和 gy- 必须加在 .row 上才生效，直接加在 .col 或表单控件上无效；它们通过 CSS 自定义属性 --bs-gutter-x/y 触发 flex gap 机制，控制行列间距而非外边距。</p>
gx-* 和 gy-* 必须加在 .row 上才生效
直接给 .col 或表单控件加 gx-3、gy-2 完全无效——这些类只作用于 .row 元素，靠设置 CSS 自定义属性 --bs-gutter-x 和 --bs-gutter-y 触发内部的负 margin / 正 padding 配对机制。DevTools 里搜不到这两个变量，说明类没起作用。
常见错误现象：
-
<div class="col gx-2">→ 列无变化，但右侧可能意外偏移（因.row的负 margin 没被抵消） -
<input class="form-control gy-3">→ 毫无垂直间距效果，打印/缩放时反而错位
水平间距用 gx-*，垂直间距用 gy-*，别混用 mb-*
gx-* 控制同一行内各 .col 左右之间的空隙；gy-* 控制同一行内多行 .col（比如 .col-12 堆叠）上下之间的空隙。它们不是外边距，而是基于 flex gap 的布局行为，不撑开父容器高度，缩放和打印更稳定。
千万别用 mb-3 替代 gy-2：
-
mb-3是外边距，会改变盒模型尺寸，导致.container-fluid下出现横向滚动条 -
gy-2对应--bs-gutter-y: 0.5rem，和.row的负margin-top/bottom精确配对，确保多行堆叠不重叠也不脱节 - 表单字段垂直排列时，
gy-2比g-3更合适——只调垂直方向，不影响全宽控件对齐
响应式 gutter 必须显式兜底，不能只写高断点类
想实现“小屏无水平间距、中屏起有 1rem、大屏变 1.5rem”，不能只写 gx-md-3 gx-lg-4。因为 Bootstrap 默认 gx-2（即 --bs-gutter-x: 0.5rem）在 xs 断点仍生效，必须显式清空：
-
gx-0：清掉所有断点下的默认水平 gutter（包括 xs） -
gx-md-3：从 md（≥768px）起设为 1rem -
gx-lg-4：从 lg（≥992px）起覆盖为 1.5rem
顺序无关，但缺一不可；断点名必须严格用 xs/sm/md/lg/xl/xxl，写成 gx-sx-2 或 g-small-3 会被忽略。
自定义断点后 gy-* 类不会自动编译出来
如果你在 SCSS 中新增了断点（例如加了 xxxl: 1600px），光改 $grid-breakpoints 不够，还必须同步调用：
@include generate-gutter-classes();
否则 HTML 里写了 gy-xxxl-3，CSS 文件里根本没这个规则，浏览器自然不认。原生断点（xs–xxl）已预编译，但任何扩展断点都需要手动触发生成。
真正容易被忽略的是：gutter 类的生效依赖三重耦合——正确的元素层级（.row 直接子元素必须是 .col）、完整的响应式声明链、以及底层 CSS 变量的实际存在。漏掉任意一环，间距就“看起来不对”。
