gutter 必须加在 .row 上，加在 .col 上完全无效；Bootstrap 5 通过 .row 的负外边距与 .col 的正内边距协同实现列间距，仅当 gx-/gy- 类作用于 .row 时才触发 CSS 变量配对计算。
gutter 必须加在 .row 上，加在 .col 上完全无效
bootstrap 5 的列间距（gutter）不是靠 常见错误包括： 值从 0 到 5，对应预设尺寸（ 响应式 gutter 必须用 容易踩的坑： 真正要取消水平间隙，唯一安全方式是 最麻烦的从来不是“怎么加”，而是判断这个空隙该由谁承担：是上一行的 bottom、下一行的 top、中间元素的 margin，还是列内部的 gutter。错一层，整个响应式节奏就偏了。.col 自己的 padding “撑”出来的，而是 .row 和 .col 协同工作的结果：.row 有负左右外边距（如 margin-left: -1rem），.col 有正左右内边距（如 padding-left: 1rem），两者抵消后内容才对齐容器边缘，列之间又保持间隙。如果你把 gx-3 写在 .col 上，比如 --bs-gutter-x 变量被设置，整个机制压根不触发。
px-0 或 ms-2 手动调 .col 的边距——只改了 padding，没动 .row 的负 margin，结果整行向右偏移 1remclassName="gx-3"，但实际没透传到原生 .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 触发框架内部的配对计算，所以必须写在 gx-3 ≈ 1rem），也支持响应式写法：
gx-0 gx-md-3：小屏无水平间隙，中屏起恢复 1remgy-2 常用于表单字段垂直排列，避免每行控件贴得太紧g-3 是 gx-3 gy-3 的简写，同时设水平+垂直，适合画廊类网格g-3 和已废弃的 no-gutters——后者在 v5 中无任何样式规则响应式 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 已完成全部协调。
