g-*类必须加在.row上，加在.col上完全无效；Bootstrap 5的gutter由.row负margin与.col正padding配对实现，仅对.row直接子元素.col生效，且需严格使用gx-/gy-响应式类名并避免覆盖--bs-gutter-x变量。
g-*类必须加在.row上，加在.col上完全无效
bootstrap 5 的 gutter（行列间距）不是靠给列加 padding 实现的，而是由 .row 的负 margin 和 .col 的正 padding 配对生成。这个机制只对 .row 的直接子元素是 .col 时生效。
所以你写 <div class="col-6 g-sm-4"> 是无效的——DevTools 里根本看不到 --bs-gutter-x 变量被注入，也不会有任何间距变化。
-
g-sm-4、gx-md-2这类类名，只能作用于.row或启用了 flex 的容器（如class="d-flex"） - 如果包裹
.row的外层有overflow: hidden或width: fit-content，会导致.row的负 margin 被截断，视觉上“没间距” - 全局重写了
:root { --bs-gutter-x: 0 }？那所有gx-*类都会失效
响应式 gutter 要用 gx-{breakpoint}-{size}，别碰 Sass 变量除非全局重编译
想让小屏无间距、中屏起有 1rem、大屏加到 1.5rem，直接写：<div class="row gx-0 gx-md-3 gx-lg-4">。它会生成带媒体查询的 CSS，并自动设置 --bs-gutter-x: 0、--bs-gutter-x: 1rem、--bs-gutter-x: 1.5rem，优先级高于全局 Sass 变量。
常见错误是只写 gx-md-2，结果手机上还有间距——因为默认 fallback 是 gx-2（即 --bs-gutter-x: 0.5rem），必须显式用 gx-0 清掉小屏。
- 断点名必须严格匹配：
xs、sm、md、lg、xl、xxl；写成g-small-4或gx-sx-2会被忽略 -
gx-控水平间距，gy-控垂直间距，g-不合法（Bootstrap 5 中不存在g-3这种写法） - 自定义断点（比如新增
sm: 480px）后，必须同步调用@include generate-gutter-classes()，否则gx-sm-2压根不会被编译出来
别用 px-* 类模拟 gutter，会破坏宽度对齐
px-0 px-lg-3 看似能“移动端去边距、大屏加回来”，但实际只是给单个 .col 加了左右 padding，没动 .row 的负 margin。结果就是：列变宽了，行没“拉回来”，整体超出容器边界，尤其在 .container-fluid 下会触发横向滚动条。
更隐蔽的问题是换行错乱——col-md-6 在小屏下可能不占满，或 order 类行为异常，因为栅格基线已被破坏。
- 真正取消 gutter 的写法只有：
gx-0（水平）、gy-0（垂直）、g-0（两者） -
no-gutters是 Bootstrap 4 的废弃类，5 里写了也不生效 - 想让某列“破格”（比如中间一列间距加大），别改它的
padding，稳妥做法是把它单独抽出来，用ms-n3 me-n3对齐原有 gutter 宽度
Bootstrap 4 用户注意：这套类根本不存在
如果你用的是 Bootstrap 4，gx-sm-2、g-sm-4 这些类名压根不会被识别。v4 只支持 .no-gutters 或手动写媒体查询 + 调整 .row margin 和 .col padding。
升级到 v5 是最省事的方案；如果不能升，就别在 HTML 里写 gx-*，否则 DevTools 里连样式规则都找不到，排查会浪费大量时间。
真正的响应式 gutter 控制，核心就一条：所有间距逻辑必须从 .row 出发，变量必须通过 --bs-gutter-x/y 注入，且仅在此处被消费。其他任何绕过它的尝试，短期可能“看起来像”，长期必然在缩放、打印、动态加载等场景暴露问题。
