gx-/gy-类必须加在.row上才生效，且需显式写全所有断点类（如gx-0 gx-md-3 gx-lg-4），缺一不可；仅写部分断点不会清空其他断点默认值。
必须把 gx- 或 gy- 类加在 .row 元素上，否则完全无效；想让某断点才有间距、另一断点取消，得显式写全所有相关断点类，不能只写“生效”的那个。
gx-/gy- 类只能加在 .row 上，加在 .col 里没用
Bootstrap 5 的 gutter 是靠 .row 的负 margin 和其直接子元素 .col 的正 padding 配对实现的。这个机制只响应 .row > .col 结构，且 CSS 变量（如 --bs-gutter-x）只注入到 .row 元素上。
✅ 正确写法：<div class="row gx-md-3 gy-lg-2"><div class="col"></div></div>❌ 错误写法：<div class="col gx-md-3">、<div class="row" style="margin: 0">、<input class="form-control gy-2"> —— 这些位置加了也看不到变量，间距不会变<li>React-Bootstrap 或 NextUI 等封装组件，要确认 <code>className是否透传到了底层原生<div class="row">，否则类名被吃掉等于没写<h3>响应式 gutter 必须显式覆盖所有断点，默认值不会自动清空</h3> <p>默认每个 <code>.row都有gx-2（即--bs-gutter-x: 0.5rem）。你只写gx-md-3，小屏下依然用默认值，不是“中屏才有”，而是“小屏有默认、中屏叠加”。- 想实现「小屏无间距、中屏 1rem、大屏 1.5rem」，必须写：
gx-0 gx-md-3 gx-lg-4 -
gx-0是兜底，清掉所有断点（包括xs）的水平 gutter - 断点名必须严格是
xs/sm/md/lg/xl/xxl，g-sx-3或gx-small-3会被忽略 - 顺序无关，但缺一不可；
gx-md-3不会自动覆盖xs下的值
别用 mb-/mt-/px- 模拟 gutter，它会破坏布局基线
gy-2是基于 flex gap 的原生行为，不改变盒模型尺寸；而mb-2是外边距，会撑开父容器高度，还可能让下一行脱离栅格对齐基线。- 两个卡片行之间需要空隙 → 给上一行加
gy-3，比给下一行加mt-4更可靠 - 表单字段堆叠时控制行距 → 用
gy-2，不是mb-2；否则在.container-fluid下易右侧溢出或出现横向滚动条 - 手动给
.col加px-0或ms-3→ 只改了 padding/margin，但.row的负 margin 还在，结果是整行左偏、右侧留白、小屏换行错乱
自定义断点或全局修改需重新编译 Sass
如果项目里新增了断点（比如
xs: 0,sm: 480px），光改$grid-breakpoints不够，还必须调用@include generate-gutter-classes()，否则gx-xs-2这类类名压根不会出现在 CSS 中。- 全局改
$grid-gutter-width？必须在导入 Bootstrap SCSS 前重定义，且会影响所有断点 - 想按断点差异化设置（如小屏 0.5rem、大屏 2rem）？Sass 用户应扩展
$guttersmap 并重编译，CDN 用户得手动补--bs-gutter-x-md等变量或写媒体查询覆盖 - 别在
:root里粗暴覆盖--bs-gutter-x：它会被工具类生成的同名变量压制；但若你写了:root { --bs-gutter-x: 0 }，反而会压制所有gx-*类的效果——排查时先看 DevTools 里变量是否被覆
最容易被忽略的是：
gx-和gy-控制的是不同维度的间距，且它们的响应式逻辑不是“条件启用”，而是“优先级覆盖”。漏掉gx-0这种兜底类，小屏就会沿用默认值，视觉上根本不像你预期的那样“断点专属”。- 想实现「小屏无间距、中屏 1rem、大屏 1.5rem」，必须写：
