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