Bootstrap如何设置特定断点下的列间距Gutter的CSS写法及类名用法

Bootstrap 5 的 gutter 类（如 gx-md-3）必须作用于 .row 元素才能生效，通过 --bs-gutter-x 变量协调 .row 负 margin 与 .col 正 padding；仅写类名但结构不符、父容器干扰或断点未完整声明均导致失效。

Bootstrap 5 的特定断点列间距（gutter）不能靠写死 CSS 实现，必须用 gx-{breakpoint}-{size} 类加在 .row 上，否则变量不注入、间距不生效。

gx-{breakpoint}-{size} 类必须加在 .row 上才生效

所有 gutter 类（gx-*、gy-*、g-*）只对 .row 元素起作用。它通过设置 CSS 自定义属性 --bs-gutter-x，让 .row 的负 margin 和其直接子元素 .col 的正 padding 配对抵消——这个机制只响应 .row > .col 结构。

1. ✅ 正确写法：<div class="row gx-md-3"><div class="col"></div></div>
2. ❌ 错误写法：<div class="col gx-md-3">、<div class="row" style="margin:0">、<input class="form-control gx-2"> —— 这些都不会触发 gutter 计算，DevTools 里也看不到 --bs-gutter-x
3. React-Bootstrap 或 NextUI 等封装组件，需确认 className 是否透传到了底层原生 <div class="row">，否则类名被吃掉等于没写

响应式 gutter 必须显式覆盖所有断点，默认值不会自动清空

Bootstrap 默认给每个 .row 设了 gx-2（即 --bs-gutter-x: 0.5rem）。你只写 gx-md-3，小屏下依然保留默认值——不是“中屏才有”，而是“小屏有默认值、中屏起叠加新值”。

1. 想实现“小屏无间距、中屏 1rem、大屏 1.5rem”，必须写全：gx-0 gx-md-3 gx-lg-4
2. 顺序无关，但缺一不可；gx-0 是为了清掉 xs 断点下的 fallback 值
3. 断点名只能是 xs/sm/md/lg/xl/xxl，g-sx-3 或 gx-small-3 会被忽略
4. 别用 px-3 或 ms-3 模拟 gutter：只改 .col 的 padding/margin，但 .row 的负 margin 还在，结果是整行左偏、右侧留白、换行错乱

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

如果你在 Sass 中新增或修改了断点（例如 $grid-breakpoints: (xs: 0, sm: 480px, md: 768px, ...)），光改变量不够，还必须手动调用 Bootstrap 提供的 mixin：

1. @include generate-gutter-classes(); —— 否则 gx-xs-2、gy-sm-3 这类类名根本不会出现在编译后的 CSS 中
2. 如果只是局部微调，推荐用工具类组合；若要全局统一改，需在 @import "bootstrap/scss/bootstrap" 之前重定义 $grid-gutter-width，并重新编译
3. 别试图在 :root 里覆盖 --bs-gutter-x：它会被工具类生成的同名变量压制；但若你写了 :root { --bs-gutter-x: 0 }，反而会压制所有 gx-* 类的效果

最常被忽略的一点：gutter 是一套配对机制，不是单边样式。哪怕类名写对了，只要结构不是 .row > .col，或者父容器被 style="margin: 0" 干扰，整个逻辑就失效了。