gx-*必须加在.row上才生效，因Bootstrap 5通过.row负外边距与.col正内边距配对抵消实现列间距，仅作用于.row时才触发--bs-gutter-x变量计算，写在.col上无效且破坏布局。
gx-* 必须加在 .row 上才生效
Bootstrap 5 的列间距不是靠给 .col 加 margin 或 padding 实现的，而是通过 .row 的负外边距（如 margin-left: -0.75rem）和 .col 的正内边距（如 padding-left: 0.75rem）配对抵消来完成的。这个机制只响应直接写在 <div class="row"> 上的 gx-* 类。
常见错误包括：
-
<div class="col-6 gx-3">→ DevTools 里完全看不到--bs-gutter-x变量，间距无变化 - 用
ms-2或px-3手动调.col边距 → 破坏配对，整行向左偏移，小屏换行错乱 - 在 React-Bootstrap 的
Row组件上传className="gx-3"，但未透传到原生<div class="row">→ 类名被吃掉
固定间距用 gx-0 到 gx-5，别混用 px 值
gx-* 的值是预设的，对应内置 CSS 变量：gx-0 是 --bs-gutter-x: 0，gx-3 是 --bs-gutter-x: 1rem（约 16px），不支持 gx-12px 这类写法。想设“固定 12px”，有两个安全路径：
- 用 CSS 变量覆盖：
<div class="row" style="--bs-gutter-x: 12px"> - 或 Sass 编译时重定义：
$grid-gutter-width: 12px（需在所有@import前，且重编译整个 Bootstrap） - 千万别写
gx-12或g-12—— 这些类根本不存在，浏览器忽略
嵌套 .row 时，gutter 不继承，必须单独设
外层 .row gx-3 不会让内层 .row 自动获得水平间距。比如卡片内部再放双列网格，若不想有额外间隙，必须显式加 gx-0：
<div class="row gx-3">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="row gx-0"> <!-- 关键：这里必须单独加 gx-0 -->
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
</div>
</div>
</div>漏掉这一步，内层会沿用默认 gx-2（0.5rem），导致卡片内容意外撑宽或右侧留白。
别用 mb-* 替代 gy-* 控制行间垂直间距
如果目标是让多行 .col-12 堆叠时上下留空（比如表单字段垂直排列），该用 gy-2，不是 mb-2：
-
gy-2调的是.col的padding-top/bottom，配合.row的负margin-top/bottom，不撑开父容器高度 -
mb-2是外边距，会让父容器计算高度变大，在.container-fluid下易触发横向滚动条 - 两个紧邻的
.row之间要空隙？更稳妥的是<div class="row"></div><div class="row mt-4"></div>，而非给前一个加mb-4
真正容易被忽略的是：gutter 生效依赖三重耦合——.row 元素上正确挂载类、子元素必须是 .col、CSS 变量实际注入成功。缺一不可，否则“看起来没反应”就不是 bug，而是机制没启动。
