<p>gx-* 类必须加在 .row 上而非 .col 上，因其依赖 .row 的负 margin 与 .col 的正 padding 配对生效，且仅匹配 .row 直接子元素为 .col 的结构。</p>
gx-* 类必须加在 .row 上，加在 .col 上完全没用
你写 <div class="col-6 gx-3">A</div>，DevTools 里根本看不到 --bs-gutter-x 变量，CSS 规则压根不匹配。因为 gx-* 是专为 .row（或 display: flex 容器）设计的，它靠的是 .row 的负 margin 和 .col 的正 padding 配对生效——这个配对只认 .row 的**直接子元素是 .col** 的结构。
常见错误现象：
-
.col单独存在、没被.row包裹 → 左右多出 15px 空白（.row负 margin 缺失，.colpadding 暴露） - 用了 React-Bootstrap 或其他封装组件 → 查文档确认
className是否透传到原生<div class="row">，否则类名被吃掉 - 手动给
.row加style="margin: 0"→ 破坏对齐基线，打印/缩放时容易错位
响应式 gutter 别用 px-* 模拟，要用 gx-{breakpoint}-{size}
想实现“小屏无间隙、中屏 1rem、大屏 1.5rem”，别写 px-0 px-md-3 px-lg-4 —— 它只改 .col 的 padding，不抵消 .row 的负 margin，结果是整行右偏、换行错乱。
正确写法是：
<div class="row gx-0 gx-md-3 gx-lg-4"> <div class="col-6">A</div> <div class="col-6">B</div> </div>
这会生成三组带媒体查询的 CSS，并注入对应值的 --bs-gutter-x 变量，优先级高于全局 Sass 变量。注意断点前缀含义：
-
gx-sm-2：从sm断点（≥576px）起生效 -
gx-md-0：从md（≥768px）起取消水平 gutter - 自定义了断点（如新增
xs: 0, sm: 480px）→ 必须同步调用@include generate-gutter-classes()，否则gx-xs-2压根不会被编译出来
局部微调推荐直接改 CSS 变量，不是 Sass 变量
运行时动态调整或单个 .row 特殊处理，最轻量的方式是直接设置 --bs-gutter-x 或 --bs-gutter-y：
<div class="row" style="--bs-gutter-x: 0.5rem;"> <div class="col-4">A</div> <div class="col-4">B</div> <div class="col-4">C</div> </div>
比写 gx-2 更灵活，也不依赖 Sass 编译。但要注意：
- 单独写
.row { --bs-gutter-x: 0 }权重不够，会被 Bootstrap 原生高权重选择器覆盖 - 想全局统一改（比如全站所有
.row都用 12px 间距）→ 改 Sass 变量$grid-gutter-width: 0.75rem并重新编译整个 Bootstrap - 改 Sass 变量会影响所有栅格行为，包括
row-cols-*和嵌套.row，不能只当“列间距开关”来用
gutter 控制的是列之间，不是内容与列边框之间
如果你看到文字贴着 .col 左右边缘，该调的是 .col 内部的 px-3 或自定义 padding，而不是去碰 gx-。后者一动，整个栅格对齐基线就可能偏移——因为 gx- 同时改 .row 的负 margin 和每个 .col 的左右 padding，目标是维持列之间的空隙和容器边缘对齐的双重平衡。
真正容易被忽略的是：gutter 不是“给列加边距”，而是“让列之间有空隙的同时，内容仍能对齐容器边界”。所以任何绕过 .row/.col 协同机制的修改，都会让这个平衡失效。
