g-sm-4是Bootstrap 5中仅作用于.row的响应式gutter工具类，通过设置--bs-gutter-x/y变量控制行列间距，加在.col或普通元素上无效。
直接用 g-sm-4 作用于 .row 即可生效，但必须确保它没被其他 gutter 类覆盖、没写错断点名、也没加在 .col 上——否则完全无效。
g-sm-4 是什么，为什么只对 .row 有效
g-sm-4 是 Bootstrap 5 提供的响应式 gutter 工具类，表示“从 sm 断点（≥576px）起，启用水平 + 垂直间距为 3rem 的 gutter”。它底层设置的是 CSS 自定义属性 --bs-gutter-x 和 --bs-gutter-y，而这些变量只被 .row 的样式规则读取并用于计算 margin/padding 配对。加在 .col 或普通 div 上，CSS 变量不会触发任何布局逻辑。
-
g-sm-4不是“给列加 padding”，而是重置整行的 gutter 行为 - 如果同时写了
g-2和g-sm-4，后者会覆盖前者（因媒体查询优先级更高） - 断点名必须严格匹配：可用的有
xs、sm、md、lg、xl、xxl；写成g-small-4或g-sx-4会被忽略
常见失效场景和排查点
你写了 g-sm-4 却没看到间距变化，大概率掉进了这几个坑：
- 类名加在了
.col上，比如<div class="col-6 g-sm-4">—— 完全无样式效果，DevTools 里也查不到对应 CSS 变量 -
.row外层被自定义容器包裹，且该容器有overflow: hidden或width: fit-content，导致负 margin 被截断 - 项目中全局覆盖了
--bs-gutter-x，例如在:root里写了--bs-gutter-x: 0，这会压制所有g-*类的变量设置 - 用了 Bootstrap 4 ——
g-sm-4是 v5+ 特性，v4 只支持.no-gutters或手动重写 margin/padding
想让小屏无 gutter、中屏起才有，该怎么写
别用 px-0 px-md-3 这类 padding 类模拟，它们只动 .col 的内边距，不碰 .row 的负外边距，会导致整体宽度超限、换行错乱。
- 正确写法：
<div class="row gx-0 gx-md-3"> -
gx-0先清空所有断点下的水平 gutter -
gx-md-3从md（≥768px）起恢复 1rem 水平间距，自动同步更新--bs-gutter-x并重新计算子.col的 padding - 如果还需垂直间距，补上
gy-md-2即可，g-sm-4本身已含垂直方向，无需额外叠加
动态切换 gutter 的实际做法
纯 CSS 类无法“动态”响应数据变化，真要运行时切换，得靠 JS 控制 class 列表：
- 用
element.classList.toggle("g-sm-4", condition)开关 - 避免反复
add/remove，推荐预先定义好几组 class（如"g-0"、"g-sm-2"、"g-lg-4"），再用className = "row " + gutterClass替换 - React/Vue 中不要在
.row上绑定style或强行内联--bs-gutter-x，这会和工具类冲突，优先走 className 控制 - 注意 SSR 场景：服务端渲染时若
g-sm-4未命中断点，JS 激活后可能闪动，建议搭配useEffect或mounted钩子延迟应用
真正容易被忽略的是：gutter 的“动态”从来不是改单个元素的 margin 或 padding，而是切换整行的 CSS 变量上下文——只要没从 .row 出发，所有调试都是在绕弯。
