gx- 和 gy- 类必须加在 .row 元素上才生效，用于设置 --bs-gutter-x 和 --bs-gutter-y 自定义属性，通过 flex gap 机制实现列/行间距控制，不作用于 .col 或表单控件等其他元素。

gx-* 和 gy-* 必须加在 .row 上才生效

直接写 class="col gx-3" 或 class="form-control gy-2" 完全无效——这些类只对 <div class="row"> 起作用。它们本质是设置 CSS 自定义属性 <code>--bs-gutter-x 和 --bs-gutter-y，触发 Bootstrap 内部的 flex gap 配对机制（.row 的负 margin 与 .col 的正 padding 精确抵消）。DevTools 里搜不到这两个变量？说明类没加对位置。

常见错误现象：

• <div class="col gx-2"> → 列间距不变，但整行可能向右偏移（因 <code>.row 的负 margin 没被抵消）
• <input class="form-control gy-3"> → 垂直方向毫无变化，打印时控件还可能错位

水平间隙用 gx-*，垂直间隙用 gy-*，别混用

gx-* 控制同一 .row 内所有 .col 左右之间的空隙；gy-* 控制同一 .row 内多行 .col（比如多个 .col-12 堆叠）上下之间的空隙。它们不是外边距，不改变盒模型尺寸，缩放和打印更稳定。

关键区别：

• gx-2 对应 --bs-gutter-x: 0.5rem（8px），影响列并排时的水平距离
• gy-2 对应 --bs-gutter-y: 0.5rem，影响表单字段垂直堆叠时的行间距
• 别用 mb-3 替代 gy-2：前者是外边距，会撑开父容器高度，可能在 .container-fluid 下引发横向滚动条

响应式 gutter 必须显式兜底，不能只写高断点类

想实现“小屏无水平间距、中屏起有 1rem、大屏变 1.5rem”，不能只写 gx-md-3 gx-lg-4。因为 Bootstrap 默认在 xs 断点仍生效 gx-2（即 --bs-gutter-x: 0.5rem），必须显式清空：


Bootstrap
Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。
下载
• 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 会被忽略。

嵌套 row 时 gutter 要分层控制

外层 .row 的 gx-3 不会自动继承给内层 .row。如果在 .col 里再放一个 .row（比如双列方形容器组），必须单独处理：

• 外层 .row 用 gx-3 保持主栏间距
• 内层 .row 加 gx-0 或 gx-1 独立控制，避免叠加出意外空白
• 切勿给 .col 加 px-0 后再塞 .row——这会破坏子 .row 的负 margin 抵消逻辑，导致换行异常

最易被忽略的是：gx-/gy- 类只对直接子元素为 .col 的 .row 生效；中间插了其他 wrapper 就失效。