g-sm-4必须加在.row上才生效，它是Bootstrap 5中仅作用于.row的响应式gutter工具类，通过设置--bs-gutter-x/y变量控制行列间距，加在.col或普通元素上无效。
g-sm-4 必须加在 .row 上才生效
g-sm-4 是 Bootstrap 5 的响应式 gutter 工具类，它只对 .row 元素起作用。加在 .col、div 或表单控件上完全无效——DevTools 里根本看不到 --bs-gutter-x 或 --bs-gutter-y 变量被注入，列/行之间也不会产生任何间距。
原因很直接：Bootstrap 5 的 gutter 机制依赖 .row 的负 margin（如 margin-top: -1rem）和其直接子元素 .col 的正 padding（如 padding-top: 1rem）配对抵消。这个逻辑只响应 .row > .col 结构，且 CSS 变量仅注入到 .row 元素上。
- ✅ 正确：
<div class="row g-sm-4"><div class="col"></div></div> - ❌ 错误：
<div class="col g-sm-4">、<input class="form-control g-sm-4">、<div class="row" style="margin: 0"> - React-Bootstrap 或 NextUI 等封装组件，需确认
className是否透传到了底层原生<div class="row">，否则类名被吃掉等于没写
g-sm-4 表示“从 sm 断点起启用 3rem 的行列间距”
g-sm-4 不是“给列加 padding”，而是重置整行的 gutter 行为：它同时设置 --bs-gutter-x: 3rem 和 --bs-gutter-y: 3rem，让水平与垂直方向都启用该尺寸。
断点名必须严格匹配 Bootstrap 内置值：xs、sm、md、lg、xl、xxl。写成 g-small-4、g-sx-4 或 g-md-sm-4 都会被忽略。
- 如果同时写了
g-2和g-sm-4，后者会覆盖前者（因媒体查询优先级更高） -
g-sm-4本身已含垂直方向，不需要额外叠加gy-sm-4 - 想实现“小屏无 gutter、中屏起才有”，不能只写
g-sm-4；必须显式兜底：g-0 g-md-3
只写 g-sm-4，手机上仍有间距？这是默认值在起作用
Bootstrap 默认给每个 .row 设了 g-2（即 --bs-gutter-x/y: 0.5rem）。你只写 g-sm-4，意味着 xs/sm 下仍用默认值，md 及以上才切换为 3rem —— 所以你在手机上看不见变化，不是类没生效，而是 fallback 值还在。
要真正让小屏无间距、sm 起有 3rem，必须写全：
-
g-0：清掉所有断点下的 gutter（包括 xs） -
g-sm-4：从 sm（≥576px）起启用 3rem - 顺序无关，但缺一不可
漏掉 g-0，就等于没动 xs 断点；漏掉 g-sm-4，sm 就不会升级。
自定义断点后，g-sm-4 类可能根本不存在
如果你在 SCSS 中修改了 $grid-breakpoints（比如把 sm 改成 480px），那么 g-sm-4 这类工具类不会自动编译进 CSS——除非你手动调用：
@include generate-gutter-classes();
否则 HTML 中写了 g-sm-4，浏览器也查不到对应规则，DevTools 里连变量都没有。
CDN 用户无法调用 mixin，只能改用媒体查询覆盖或放弃自定义断点名；Sass 用户则必须确保该 mixin 在 gutter 相关样式之后执行。
