gx- 和 gy- 必须加在 .row 上才生效，它们通过 css 自定义属性 --bs-gutter-x/y 触发 flex gap 机制，需 .row 负外边距与 .col 正内边距精确抵消，否则布局错位；水平间距用 gx-，垂直用 gy-，非 margin/padding 快捷方式，响应式需显式兜底如 gx-0 gx-md-3。
gx-* 和 gy-* 必须加在 .row 上才生效
直接写 class="col gx-3" 或 class="form-control gy-2" 完全无效——这些类只对 <div class="row"> 起作用。它们不是 CSS margin/padding 的快捷方式，而是通过设置 CSS 自定义属性 <code>--bs-gutter-x 和 --bs-gutter-y 触发 Bootstrap 内部的 flex gap 配对机制：.row 的负外边距与 .col 的正内边距必须精确抵消，否则列会整体右偏或出现横向滚动条。
常见错误现象：
<div class="col-6 gx-2"> → DevTools 里搜不到 <code>--bs-gutter-x，列间距不变，但右侧可能意外截断- 在 React-Bootstrap 的
Row组件上传className="gx-3"却没透传到原生<div class="row"> → 类名被吃掉，gutter 不生效<li>嵌套 <code>.row时，外层设了gx-4，内层没加gx-0→ 内层列间隙被放大两倍 - 表单字段垂直排列（每行一个
.col-12）→ 用gy-2比g-3更合适，只调垂直方向，不影响全宽控件对齐 - 卡片网格（
.col-md-4并排）→gx-3让列间留出 1rem 空隙，避免内容挤在一起 - 想彻底清空列间水平缝隙 → 必须用
gx-0，而非px-0或ms-2；后者只改 padding，不重置 .row 的负 margin，破坏配对 -
gx-0：清掉所有断点（包括 xs）的默认水平 gutter -
gx-md-3：从 md（≥768px）起设为 1rem -
gx-lg-4：从 lg（≥992px）起覆盖为 1.5rem - 给
.row加mb-4→ 破坏栅格负边距逻辑，嵌套网格错位，卡片内.row也被撑开 - 两行之间夹着
<h3></h3>→ 优先给标题加mb-4，而不是动.row - 大量顶层
.row需统一下方留白 → 用 CSS 规则.row + .row { margin-top: 1.5rem; }，精准限定作用域，不波及嵌套
水平间距用 gx-*，垂直间距用 gy-*
gx-* 控制同一 .row 内所有 .col 左右之间的空隙（即“列与列之间”），gy-* 控制同一 .row 内多行 .col（比如多个 .col-12 堆叠）上下之间的空隙。它们不是外边距，不改变盒模型尺寸，缩放和打印更稳定。
典型使用场景：
响应式 gutter 必须显式兜底
Bootstrap 默认在所有断点都启用 gx-2（即 --bs-gutter-x: 0.5rem）。如果只想在中屏及以上有水平间距，不能只写 gx-md-3 —— xs 断点下仍保留默认 0.5rem，导致小屏列太松。
正确写法是组合覆盖：
断点名必须严格用 xs/sm/md/lg/xl/xxl，写成 gx-sx-2 或 g-small-3 会被忽略。顺序无关，但缺一不可。
别用 mb-* 替代 gy-*
mb-3 是外边距，会撑开父容器高度、影响布局流；gy-2 是基于 flex gap 的布局行为，不改变父容器计算高度，打印和缩放更可靠。
常见混淆点：
真正难的不是填多少像素，而是判断这个空隙该由谁承担：上一行的 bottom？下一行的 top？中间元素的 margin？还是列内部的 gutter？错一层，整个响应式节奏就偏了。
