Bootstrap如何设置Row行内各列之间的缝隙宽度大小及其显示控制

<p>gx- 和 gy- 必须加在 .row 上才生效，它们通过 CSS 自定义属性 --bs-gutter-x/y 触发 flex gap 机制，需 .row 负外边距与 .col 正内边距精确抵消，否则布局错位；水平间距用 gx-，垂直用 gy-，非 margin/padding 快捷方式，响应式需显式兜底如 gx-0 gx-md-3。</p>

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

直接写 class="col gx-3" 或 class="form-control gy-2" 完全无效——这些类只对 <div class="row"> 起作用。它们不是 CSS margin/padding 的快捷方式，而是通过设置 CSS 自定义属性 --bs-gutter-x 和 --bs-gutter-y 触发 Bootstrap 内部的 flex gap 配对机制：.row 的负外边距与 .col 的正内边距必须精确抵消，否则列会整体右偏或出现横向滚动条。

常见问题表现：

1. <div class="col-6 gx-2"> → DevTools 里搜不到 --bs-gutter-x，列间距不变，但右侧可能意外截断
2. 在 React-Bootstrap 的 Row 组件上传 className="gx-3" 却没透传到原生 <div class="row"> → 类名被吃掉，gutter 不生效
3. 嵌套 .row 时，外层设了 gx-4，内层没加 gx-0 → 内层列间隙被放大两倍

水平间距用 gx-*，垂直间距用 gy-*

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

典型使用场景：

1. 表单字段垂直排列（每行一个 .col-12）→ 用 gy-2 比 g-3 更合适，只调垂直方向，不影响全宽控件对齐
2. 卡片网格（.col-md-4 并排）→ gx-3 让列间留出 1rem 空隙，避免内容挤在一起
3. 想彻底清空列间水平缝隙 → 必须用 gx-0，而非 px-0 或 ms-2；后者只改 padding，不重置 .row 的负 margin，破坏配对

响应式 gutter 必须显式兜底

Bootstrap 默认在所有断点都启用 gx-2（即 --bs-gutter-x: 0.5rem）。如果只想在中屏及以上有水平间距，不能只写 gx-md-3 —— xs 断点下仍保留默认 0.5rem，导致小屏列太松。

正确写法是组合覆盖：

1. gx-0：清掉所有断点（包括 xs）的默认水平 gutter
2. gx-md-3：从 md（≥768px）起设为 1rem
3. gx-lg-4：从 lg（≥992px）起覆盖为 1.5rem

断点名必须严格用 xs/sm/md/lg/xl/xxl，写成 gx-sx-2 或 g-small-3 会被忽略。顺序无关，但缺一不可。

别用 mb-* 替代 gy-*

mb-3 是外边距，会撑开父容器高度、影响布局流；gy-2 是基于 flex gap 的布局行为，不改变父容器计算高度，打印和缩放更可靠。

常见混淆点：

1. 给 .row 加 mb-4 → 破坏栅格负边距逻辑，嵌套网格错位，卡片内 .row 也被撑开
2. 两行之间夹着 <h3> → 优先给标题加 mb-4，而不是动 .row
3. 大量顶层 .row 需统一下方留白 → 用 CSS 规则 .row + .row { margin-top: 1.5rem; }，精准限定作用域，不波及嵌套

真正难的不是填多少像素，而是判断这个空隙该由谁承担：上一行的 bottom？下一行的 top？中间元素的 margin？还是列内部的 gutter？错一层，整个响应式节奏就偏了。