gx- 和 gy- 类必须加在 .row 上才生效，作用于 .col 无效；它们通过 css 自定义属性 --bs-gutter-x/y 触发 flex gap，控制同一行内列间水平/垂直间距，非外边距，不撑高父容器。
gx-* 和 gy-* 必须加在 .row 上才生效
直接给 .col 或 .form-control 加 gx-2、gy-3 完全无效——这些类只作用于 .row 元素，靠设置 CSS 自定义属性 --bs-gutter-x 和 --bs-gutter-y 触发 flex gap 机制。DevTools 里搜不到这两个变量，说明类根本没起作用。
常见错误现象：
<div class="col gx-2"> → 列无变化，但右侧可能意外偏移（因 <code>.row的负 margin 没被抵消）-
<input class="form-control gy-3">→ 垂直方向毫无效果，打印/缩放时反而错位 -
gx-0：清掉所有断点下的默认水平 gutter（包括 xs） -
gx-md-3：从 md（≥768px）起设为 1rem -
gx-lg-4：从 lg（≥992px）起覆盖为 1.5rem（gx-4 ≈ 1.5rem）
正确写法：<div class="row gx-3 gy-2"><div class="col"></div></div>
gx-* 控制列之间水平缝隙，gy-* 控制同一行内多行列的垂直缝隙
gx-* 只影响同一 .row 内所有 .col 左右之间的空隙；gy-* 不是“两行之间”的外边距，而是控制同一 .row 中多行 .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 默认在 xs 断点仍生效 gx-2（即 --bs-gutter-x: 0.5rem），必须显式清空：
顺序无关，但缺一不可；断点名必须严格用 xs/sm/md/lg/xl/xxl，写成 gx-sx-2 或 g-small-3 会被忽略。
嵌套 .row 时，外层 gutter 不会自动继承
外层 .row 加了 gx-3，内层 .row 依然按默认 gx-2 渲染。必须单独给内层加 gx-0 或 gx-1 —— 尤其在双列方形容器等精细排版场景下，漏掉这步会导致嵌套列间出现意外 30px 间隙（左右 padding 各 15px 叠加）。
React-Bootstrap 或 NextUI 等封装组件，需确认 className="gx-3" 是否透传到了底层原生 <div class="row">，否则类名被吃掉等于没写。<p>真正容易被忽略的是：gutter 不是视觉“留白”，而是栅格系统内部的配对计算结果；一旦脱离 <code>.row > .col 结构，或手动干预 .col 的 padding/margin，整个机制就失效了。
