gx-2控制.row内.col间的水平间距，gy-5控制相邻.row间的垂直间距；二者必须加在.row上，因bootstrap 5依赖.row上声明的css变量--bs-gutter-x/y向下透传，加在.col上无效且导致布局偏移。
gx-2 和 gy-5 分别控制什么，为什么不能加在 .col 上
gx-2 控制的是 .row 内所有 .col 之间的**水平间距**，gy-5 控制的是**相邻 .row 之间的垂直间距**。这两个类必须写在 <div class="row gx-2 gy-5"> 这样的行容器上，加在 <code>.col 或普通 <div> 上完全无效。
<p>原因在于 Bootstrap 5 的 gutter 机制依赖 CSS 自定义变量（如 <code>--bs-gutter-x）驱动，而这些变量只在 .row 上被声明并向下透传给子 .col。你在 .col 上加 gx-2，DevTools 里根本看不到任何相关样式生效。
- 加错位置的典型现象：
.col-6 gx-2看似“加了间距”，实际只是让该列多了左右padding，但.row的负外边距没变，导致整行内容右偏、右侧溢出 -
gx-2对应默认值0.5rem（约 8px），gy-5对应3rem（48px），数值越大，间隙越宽 - 如果同时需要水平和垂直 gutter，可直接用
g-2（等价于gx-2 gy-2），但g-2 g-5不会叠加——后者会覆盖前者
gx-2 和 gy-5 在响应式场景下怎么组合才不冲突
单独写 gx-2 gy-5 是静态设定，所有断点都生效；想实现“小屏紧凑、大屏拉开”，必须用带断点前缀的组合，比如 gx-0 gx-lg-2 gy-0 gy-xl-5。
这类写法不是“叠加”，而是按断点优先级覆盖：从 xs 到 xl，后写的类在对应断点及以上生效，前面的自动失效。
- 错误写法：
gx-2 gx-md-0——md及以上确实清空了水平 gutter，但xs/sm下仍保留gx-2，没问题；真正危险的是混用px-*类，比如gx-2 px-md-3，后者不触发行级 gutter 重置，会导致布局偏移 - 常见需求示例：
gx-0 gy-2 gx-lg-3 gy-lg-4表示：移动端无水平间隙 + 行间 0.5rem 垂直距；≥lg 断点起恢复水平 1rem + 垂直 1.5rem - 注意断点顺序：Bootstrap 的断点是
xs ，<code>gx-sm-2会在 ≥576px 后生效，不会影响更小屏幕
为什么用 gx-2 比手动写 style="padding: 0 0.5rem" 更安全
手动写 style="padding: 0 0.5rem" 或 class="px-2" 只改了单个 .col 的内边距，但没动 .row 的 margin-left: -0.75rem（默认值）。结果就是列变宽了，行没“拉回来”，整体宽度超限，尤其在 .container-fluid 下容易触发横向滚动条。
-
gx-2会同步设置--bs-gutter-x: 0.5rem，然后.row用这个值重算margin，.col用它重算padding，全程配对 - 打印或缩放时，手写
px值可能因 DPI 变化失准；gx-2基于rem，跟随根字体缩放，更稳定 - 嵌套
.row场景下，手写padding会让子行的负外边距与父列内边距错位，gx-*类会逐层正确继承变量
gy-5 太大导致上下行之间空太多，怎么微调又不破坏对齐
gy-5 对应 3rem（48px），确实容易让多行卡片或表单显得松散。微调关键不是“减小数值”，而是**换断点或换目标**：垂直 gutter 影响的是行与行之间，如果你只想压缩某几行之间的距离，应该把 gy-* 拆到具体 .row 上，而不是全局设在最外层容器。
- 不要给
.container加gy-5——它不识别这个类，写了也白写 - 表单场景常见做法：首行标题用
<div class="row gy-2">，输入项用 <code><div class="row gy-3">，提交按钮用 <code><div class="row gy-0">，精细控制每段垂直节奏 <li>如果发现某处 <code>gy-5让内容“掉下去”了，先检查是否漏了.row包裹——gy-*只对相邻的.row生效，两个.col直接并列不会产生垂直间隙
最易被忽略的一点：gutter 类只在 Flex 容器上起效，如果你用 display: grid 替代 .row，那 gx-/gy- 全部失效，得换用 gap 属性。
