Bootstrap如何设置特定断点下的行间距和列间距Gutter的具体数值

<p>gx-/gy- 类必须加在 .row 上才生效，因其依赖 .row 的负 margin 与 .col 的正 padding 配对机制，且 CSS 变量仅注入到 .row；错误用法如加在 .col 或 form-control 上无效。</p>

gx-/gy- 类必须加在 .row 上才生效

所有 gx- 和 gy- 工具类，包括带断点的如 gx-md-3、gy-lg-2，只对 .row 元素起作用。加在 .col、.form-control 或任意其他容器上，CSS 变量 --bs-gutter-x 和 --bs-gutter-y 根本不会被注入，DevTools 里查不到，间距也不会出现。

这是因为 Bootstrap 5 的 gutter 机制依赖于 .row 的负 margin（如 margin-left: -0.5rem）和其直接子元素 .col 的正 padding（如 padding-left: 0.5rem）配对抵消。这个配对只在 .row > .col 结构下触发，且变量仅注入到 .row 元素上。

1. ✅ 正确：<div class="row gx-md-3 gy-2"><div class="col"></div></div>
2. ❌ 错误：<div class="col gx-md-3">、<input class="form-control gy-1">、<div class="row" style="margin: 0">
3. React-Bootstrap / NextUI 等封装组件需确认 className 是否透传到了底层原生 <div class="row">，否则类名被吃掉等于没写

响应式 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」，必须写全：

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

顺序无关，但缺一不可；断点名只能是 xs/sm/md/lg/xl/xxl，g-sx-3 或 gx-small-3 会被忽略。

别用 mt-/mb-/px- 模拟 gutter，它会破坏布局基线

gy-2 控制的是相邻 .row 之间的垂直 gutter，基于 flex gap 机制，不改变父容器高度计算，缩放、打印都稳定；而 mb-4 是外边距，作用于单个 .row 元素本身，会撑开父容器，还可能让下一行脱离栅格对齐基线。

1. 两个卡片 .row 之间需要空隙 → 给上一行加 gy-3，比给下一行加 mt-4 更语义清晰、更可靠
2. 表单字段堆叠时想控制行距 → 用 gy-2 而不是 mb-2，否则 .container-fluid 下容易右侧溢出或出现横向滚动条
3. 手动给 .col 加 px-0 或 ms-3 → 只改了 padding/margin，但 .row 的负 margin 还在，结果是整行左偏、右侧留白、小屏换行错乱

自定义断点后，gx-/gy- 类不会自动编译出来

如果你在 SCSS 中修改了 $grid-breakpoints（比如新增了 sm: 480px），那么 gx-sm-3 这类类名根本不会出现在最终 CSS 文件里，除非你主动调用：

@include generate-gutter-classes();

同理，若用 Sass 自定义 gutter 尺寸，必须扩展 $gutters map 并重新编译：

$gutters: (0: 0,2: 0.5rem,"sm": 1rem,"md": 1.5rem);

注意键名用字符串 "sm"，不是未加引号的 sm（Sass 中会被当变量解析）；改完必须重新编译 CSS，纯 CDN 引入无法生效。

最常被忽略的一点：断点级 gutter 变量（如 --bs-gutter-x-md）默认不会生成，即使你写了 gx-md-3，也得靠 generate-gutter-classes() 或手动补全变量声明，否则它读的还是根级 --bs-gutter-x。