bootstrap 5 的 gutter 间距必须通过加在 .row 上的 gx-/gy- 类设置，加在 .col 或手动修改 margin/padding 会破坏 flex 布局；响应式需用 gx-{breakpoint}-{size} 叠加，全局修改须 sass 编译。
gx- 和 gy- 类必须加在 .row 上才生效
bootstrap 5 的 gutter（行/列间距）不是靠改 .col 的 padding 或给 .row 写 margin 实现的，而是靠 .row 的负外边距和 .col 的正内边距配对抵消。这个机制只响应直接子元素为 .col 的 .row。所以：
✅ 正确写法：<div class="row gx-md-3 gy-lg-2"><div class="col">...</div></div>
❌ 错误写法：<div class="col gx-md-3">、<code><div class="row" style="margin: 0">、<code><div class="form-control g-3">——全都不触发 gutter 计算。<h3>响应式 gutter 必须用 gx-{breakpoint}-{size} 组合写</h3>
<p>想让小屏无水平间距、中屏起有 1rem、大屏变 1.5rem，不能只写 <code>gx-md-3 gx-lg-4，否则 xs 断点仍用默认值（gx-2 → --bs-gutter-x: 0.5rem）。必须显式兜底：
• gx-0：清空所有断点下的水平 gutter（包括 xs）
• gx-md-3：从 md（≥768px）起设为 1rem
• gx-lg-4：从 lg（≥992px）起覆盖为 1.5rem
顺序无关，但缺一不可。断点名必须严格匹配 xs/sm/md/lg/xl/xxl，写成 g-small-3 或 gx-sx-2 会被忽略。
gy- 控制行间垂直间距，别用 mb-* 替代
表单字段堆叠、卡片内多行内容等场景，需要控制“行与行之间”的上下空隙，该用 gy-2 而不是 mb-2：
• gy-2 是基于 flex gap 的原生布局行为，不改变盒模型尺寸，不影响父容器高度计算
• mb-2 是外边距，会撑开父容器，在 .container-fluid 下易导致右侧溢出或横向滚动条
• gy-2 对应 --bs-gutter-y: 0.5rem，和 .row 的负 margin-top/bottom 配对，确保多行堆叠时不重叠也不脱节
常见错误：给 .row 加 mb-4 模拟行距——这会让下一行脱离栅格基线对齐，打印或缩放时错位。
自定义断点或全局修改需重新编译 Sass
如果项目里新增了断点（比如 xs: 0, sm: 480px），光改 $grid-breakpoints 不够，还必须调用：
• @include generate-gutter-classes()，否则 gx-xs-2 这类类名压根不会出现在 CSS 中
• 全局改 $grid-gutter-width 或 $grid-gutter-width-md 也得重编译整个 Bootstrap，适合设计规范统一的项目，不适合局部微调
别试图在 :root 里覆盖 --bs-gutter-x：它会被工具类生成的同名变量压制，但若你写了 :root { --bs-gutter-x: 0 }，反而会压制所有 gx-* 类的效果——排查时先检查 DevTools 里变量是否被覆盖。
