列间距溢出主因是未正确使用gx类或破坏.row/.col配对机制；gx类仅作用于.row元素，需同时调整.row负margin与.col内边距以保持宽度守恒，嵌套时须确保每层.col外均有.row包裹。
列间距溢出不是 gutter 太大，而是你没用对工具类或破坏了 .row/.col 的配对机制——直接加 gx-0 或检查嵌套结构就能解决。
为什么加了 gx-3 却出现横向滚动条
根本原因是只改了 .col 的 padding，没动 .row 的负 margin，导致整体宽度超限。Bootstrap 5 的 gutter 是靠 .row 的 margin-left: -1rem 和 .col 的 padding-left: 1rem 抵消实现的，缺一不可。
- 写了
<div class="col-6 px-3">→ 只加 padding，.row还在往左拽 1rem，内容被“拉出”容器边界 - 写了
<div class="row gx-3">→ 同时更新--bs-gutter-x，自动同步调整.rowmargin 和.colpadding，宽度守恒 - 用了
container-fluid但没约束子内容（比如图片没设max-width: 100%），也会触发滚动条，和 gutter 无关
gx- 类加在 .col 上完全无效
所有 gx-、gy-、g- 类都只作用于 .row 元素。加在 .col 上，DevTools 里查不到 --bs-gutter-x，CSS 规则压根不匹配。
-
<div class="row gx-4"><div class="col-6">A</div></div>✅ 生效 -
<div class="col-6 gx-4">A</div>❌ 无任何样式变化，也不报错 - React-Bootstrap 的
<Row>组件若没透传className到原生<div class="row">，同样失效 - 自定义封装的
CardGrid组件若内部没渲染.row，直接塞.col，那加啥gx-都白搭
响应式 gutter 必须显式写全断点覆盖
Bootstrap 默认对所有 .row 应用了 gx-2（即 --bs-gutter-x: 0.5rem）。只写 gx-md-3，小屏下依然有 0.5rem 间隙；想小屏清零、中屏起生效，必须明确写出 gx-0 gx-md-3。
立即学习“前端免费学习笔记（深入）”；
-
<div class="row gx-0 gx-md-3 gx-lg-4">→ 小屏 0，中屏 1rem，大屏 1.5rem - 断点名必须严格匹配：
xs、sm、md、lg、xl、xxl；写成g-small-3或g-sx-3会被忽略 - 如果项目自定义了断点（如新增
sm: 480px），必须在 Sass 中调用@include generate-gutter-classes()，否则gx-sm-2根本不会生成 CSS - 别在
:root里手动设--bs-gutter-x: 0，它会压制所有g-类，且不保证垂直方向同步
嵌套 .row 漏掉导致左右多出 15px 白边
嵌套时最常踩的坑：在 .col 里直接放另一个 .col，跳过了中间的 .row。结果就是内层 .col 的 padding 没被抵消，视觉上像“缩进”或“右侧溢出”。
- 错误：
<div class="col-8"><div class="col-4">A</div></div>→ 子.col-4左右各带 15px padding，无.row拉回 - 正确：
<div class="col-8"><div class="row"><div class="col-4">A</div></div></div>→ 内层.row的负 margin 精准抵消 - 需要嵌套无间距？在内层
.row上加gx-0，而不是给.col加px-0 - 硬加
margin-left: -15px到.col不可靠：小屏断点切换时不会自动重置，盒模型易混乱
