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 结构。
-
✅ 正确写法：
<div class="row gx-md-3"><div class="col"></div></div> -
❌ 错误写法：
<div class="col gx-md-3">、<div class="row" style="margin:0">、<input class="form-control gx-2">—— 这些都不会触发 gutter 计算，DevTools 里也看不到--bs-gutter-x - React-Bootstrap 或 NextUI 等封装组件，需确认
className是否透传到了底层原生<div class="row">，否则类名被吃掉等于没写
响应式 gutter 必须显式覆盖所有断点，默认值不会自动清空
Bootstrap 默认给每个 .row 设了 gx-2（即 --bs-gutter-x: 0.5rem）。你只写 gx-md-3，小屏下依然保留默认值——不是“中屏才有”，而是“小屏有默认值、中屏起叠加新值”。
- 想实现“小屏无间距、中屏 1rem、大屏 1.5rem”，必须写全：
gx-0 gx-md-3 gx-lg-4 - 顺序无关，但缺一不可；
gx-0是为了清掉 xs 断点下的 fallback 值 - 断点名只能是
xs/sm/md/lg/xl/xxl，g-sx-3或gx-small-3会被忽略 - 别用
px-3或ms-3模拟 gutter：只改.col的 padding/margin，但.row的负 margin 还在，结果是整行左偏、右侧留白、换行错乱
自定义断点后，gx-* 类不会自动编译出来
如果你在 Sass 中新增或修改了断点（例如 $grid-breakpoints: (xs: 0, sm: 480px, md: 768px, ...)），光改变量不够，还必须手动调用 Bootstrap 提供的 mixin：
立即学习“前端免费学习笔记（深入）”；
-
@include generate-gutter-classes();—— 否则gx-xs-2、gy-sm-3这类类名根本不会出现在编译后的 CSS 中 - 如果只是局部微调，推荐用工具类组合；若要全局统一改，需在
@import "bootstrap/scss/bootstrap"之前重定义$grid-gutter-width，并重新编译 - 别试图在
:root里覆盖--bs-gutter-x：它会被工具类生成的同名变量压制；但若你写了:root { --bs-gutter-x: 0 }，反而会压制所有gx-*类的效果
最常被忽略的一点：gutter 是一套配对机制，不是单边样式。哪怕类名写对了，只要结构不是 .row > .col，或者父容器被 style="margin: 0" 干扰，整个逻辑就失效了。
