<p>gutter 必须加在 .row 上，加在 .col 上完全无效；Bootstrap 5 通过 .row 的负外边距与 .col 的正内边距协同实现列间距，仅当 gx-/gy- 类作用于 .row 时才触发 CSS 变量配对计算。</p>
gutter 必须加在 .row 上，加在 .col 上完全无效
bootstrap 5 的列间距（gutter）不是靠 .col 自己的 padding “撑”出来的，而是 .row 和 .col 协同工作的结果：.row 有负左右外边距（如 margin-left: -1rem），.col 有正左右内边距（如 padding-left: 1rem），两者抵消后内容才对齐容器边缘，列之间又保持间隙。如果你把 gx-3 写在 .col 上，比如 <div class="col-6 gx-3">，devtools 里根本看不到 --bs-gutter-x 变量被设置，整个机制压根不触发。
常见错误包括：
- 用
px-0或ms-2手动调.col的边距——只改了 padding，没动.row的负 margin，结果整行向右偏移 1rem - 在 React-Bootstrap 等封装组件里传
className="gx-3"，但实际没透传到原生<div class="row">，类名被吃掉了 - 嵌套
.row时，外层gx-3不会自动继承给内层，必须单独给内层加gx-0或gx-1
gx- 和 gy- 控制什么、在哪生效
gx-* 只控制同一 .row 内所有 .col 之间的**水平间隙**，gy-* 控制同一 .row 内多行 .col（比如 .col-12 堆叠）之间的**垂直间隙**。它们不是“给某列加 margin”，而是通过 CSS 变量 --bs-gutter-x/--bs-gutter-y 触发框架内部的配对计算，所以必须写在 <div class="row gx-3 gy-2"> 这种位置。
值从 0 到 5，对应预设尺寸（gx-3 ≈ 1rem），也支持响应式写法：
-
gx-0 gx-md-3：小屏无水平间隙，中屏起恢复 1rem -
gy-2常用于表单字段垂直排列，避免每行控件贴得太紧 -
g-3是gx-3 gy-3的简写，同时设水平+垂直，适合画廊类网格 - 别混用
g-3和已废弃的no-gutters——后者在 v5 中无任何样式规则
响应式 gutter 怎么写才不翻车
响应式 gutter 必须用 gx-{breakpoint}-{size} 格式叠加，比如 gx-0 gx-md-3 gx-lg-4，它会生成带媒体查询的 CSS，并按断点优先级覆盖变量值。这不是“仅在某断点生效”，而是“从该断点起生效，且更高优先级”。
容易踩的坑：
- 断点名写错：可用的是
xs、sm、md、lg、xl、xxl；g-small-4或g-sx-4会被忽略 - 自定义断点（如新增
xs: 0）后，没同步调用@include generate-gutter-classes()，gx-xs-2类压根不会被编译出来 - 全局写了
:root { --bs-gutter-x: 0 }，会压制所有gx-*类的效果 - 想“小屏无间隙、大屏拉开”，别用
px-0 px-lg-3模拟——它只动.col的 padding，不碰.row的负 margin，导致大屏列整体右偏
为什么别直接给 .row 加 m-0 或 p-0
m-0 会清掉 .row 必需的负左右外边距，导致所有 .col 向右偏移、右侧内容被截断，甚至触发横向滚动条；p-0 清的是 .row 自身的 padding，对 gutter 无影响，反而可能干扰子元素垂直对齐。
真正要取消水平间隙，唯一安全方式是 gx-0——它会同步重置 --bs-gutter-x: 0，并让框架自动更新 .row 的负 margin 和 .col 的 padding，维持配对关系。写成 class="row gx-0 m-0" 是多余且有害的，gx-0 已完成全部协调。
最麻烦的从来不是“怎么加”，而是判断这个空隙该由谁承担：是上一行的 bottom、下一行的 top、中间元素的 margin，还是列内部的 gutter。错一层，整个响应式节奏就偏了。
