gutter 类必须加在 .row 上才生效，因 Bootstrap 5 依赖 .row 的负 margin 与 .col 的正 padding 协同实现；错误加在 .col 或普通 div 上无效，响应式需用 gx-{breakpoint}-{size} 组合，清除 gutter 必须用 gx-0 而非 px-0。
gutter 类必须加在 .row 上才生效
直接写 <div class="col-6 gx-3"> 完全没用，DevTools 里根本看不到对应样式。Bootstrap 5 的 gutter 是靠 .row 的负 margin 和 .col 的正 padding 协同实现的，这个机制只对 .row 的直接子元素是 .col 时起作用。
常见错误包括：
- 把
gx-*加在普通<div>或封装组件（如 React-Bootstrap 的Row）上，但 className 没透传到原生<div class="row"> - 误用 Bootstrap 4 的
no-gutters—— 这个类在 5 中已移除，写了也不生效 - 用
px-3替代gx-3：它只给单个.col加左右 padding，却不抵消.row的margin-left: -15px，结果整行向右偏移，可能触发横向滚动条
响应式 gutter 要用 gx-{breakpoint}-{size} 组合
想实现“小屏无间隙、中屏开始有 1rem、大屏变 1.5rem”，不能靠媒体查询手写 CSS，更不该改 $grid-gutter-width 变量——那是全局编译行为，不适合局部调整。
正确写法是：<div class="row gx-0 gx-md-3 gx-lg-4">。它会生成三组 CSS 自定义属性：--bs-gutter-x: 0、--bs-gutter-x: 1rem、--bs-gutter-x: 1.5rem，且后声明的规则自动覆盖前一条。
注意断点逻辑：
-
gx-sm-2表示 ≥576px 生效（sm 断点起） -
gx-md-0表示 ≥768px 开始取消水平 gutter - 如果只写
gx-md-2，小屏（xs）下仍走默认值（通常是gx-2→ 0.5rem），所以务必显式重置小屏：比如gx-0 gx-md-2
取消 gutter 别用 px-0，要用 gx-0
px-0 只清 .col 的左右 padding，.row 的负 margin 还在，视觉上列紧贴边缘，实际布局已失衡——整行向左/右偏移 15px，尤其在 .container-fluid 下容易错位或截断。
gx-0 才是真正清空 gutter 的方式：它同时重置 .row 的负外边距和 .col 的内边距，保持宽度计算一致。
恢复默认？直接用 gx-3（≈1rem），别试图用 px-3 模拟——它不抵消 margin，纯属白忙。
双列方形容器之间还有缝隙？先查 box-sizing 和 width 计算
即使用了 gx-0，两个 .col-md-6 并排仍看起来“没挨住”，大概率不是 gutter 问题，而是子容器自己留了空。
典型陷阱：
-
.square-container { width: 300px; }—— 固定宽 + 父列 padding，导致换行或溢出；应改用width: 100% - 漏写
box-sizing: border-box—— 默认content-box下，padding: 10px会让真实宽度变成100% + 20px，撑破列宽 - 用
aspect-ratio: 1 / 1但没兼容旧版 Safari/IE，fallback 缺失导致高度塌陷，视觉上像有空隙
真正影响列间距离的，只有 .row 上的 gx-* 类；其他任何对 .col 或子元素的手动 padding/margin 操作，都在绕开栅格系统本身。
