改 --bs-gutter-x/y 变量必须作用于 .row 元素才生效，写在 :root 或 .col 中无效；gutter 依赖 .row 的负 margin 与 .col 的正 padding 配对实现，仅在 .row > .col 结构中自动触发。
直接改 --bs-gutter-x 或 --bs-gutter-y 变量就能解决溢出，但必须加在 .row 上才生效；写在 :root 或 .col 里完全无效，还会掩盖真实问题。
为什么改了 --bs-gutter-x 还是溢出
常见错误是把变量写在全局作用域或错误元素上。Bootstrap 5 的 gutter 行为只响应 .row 元素上的 CSS 变量，且仅当它的直接子元素是 .col 时才触发计算逻辑。
-
:root { --bs-gutter-x: 0; }不会覆盖任何.row的 gutter，因为工具类（如gx-0）生成的变量具有更高特异性 -
<div class="col-6" style="--bs-gutter-x: 0">完全没用，.col不读这个变量 - 手动给
.row加style="margin: 0"会破坏负外边距抵消机制，导致列右偏、右侧内容被截断 - 溢出真正来源常是：嵌套时漏掉
.row、用了px-*类却没配gx-*、或容器设了overflow: hidden截断了负 margin
gx-* 类必须加在 .row 上，不能加在 .col 或外层容器
gutter 是靠 .row 的负 margin 和 .col 的正 padding 配对实现的，这个配对只在 .row > .col 结构中自动生效。
- 正确：
<div class="row gx-0"><div class="col-6">...</div></div> - 错误：
<div class="col-6 gx-0">...</div>—— DevTools 里查不到--bs-gutter-x，也没 layout 效果 - 错误：
<div class="container gx-0"><div class="row">...</div></div>——.container不参与 gutter 计算 - React/Vue 中若用封装组件（如
<Row>），需确认它把className透传到了原生<div class="row">
响应式 gutter 必须显式写全断点，不能依赖“默认归零”
Bootstrap 5 默认对所有 .row 应用了 gx-2（即 --bs-gutter-x: 0.5rem），所以不重置的话，小屏照样有间隙，容易撑破 .container-fluid 导致横向滚动条。
立即学习“前端免费学习笔记（深入）”；
- 想“小屏无间隙、中屏起有 1rem”，得写：
class="row gx-0 gx-md-3"，不是只写gx-md-3 - 断点名必须严格匹配：可用
xs、sm、md、lg、xl、xxl；g-small-3或gx-sx-2会被忽略 - 自定义断点（如新增
xs: 0）后，必须同步调用@include generate-gutter-classes()，否则gx-xs-2类不会编译出来 - 多个断点类顺序无关，后写的覆盖前写的，例如
gx-0 gx-md-3 gx-lg-4在 lg+ 断点生效--bs-gutter-x: 1.5rem
嵌套 .row 时，gutter 要分层控制，别用 m-0/p-0 补救
在 .col 里再放 .row（比如卡片网格嵌套），父列的 padding 和子 .row 的 gutter 会叠加，造成意外空白。这不是变量问题，是结构问题。
- 外层
.row用gx-3保持主栏间距，内层.row（在.col内）单独加gx-0或gx-1控制，避免继承 - 千万别给
.col加px-0再塞.row—— 这会破坏子.row的负 margin 抵消逻辑，导致换行异常 - 漏掉嵌套
.row是左右偏移的最常见原因：子.col的padding-left: 0.75rem没被抵消，视觉上像缩进，实际是布局失衡 - 真要动态切换，用 JS 控制 class 列表：
rowEl.classList.toggle("gx-0", isCompact)，别内联style="--bs-gutter-x: 0"，会和工具类冲突
最易被忽略的是：gutter 控制的是「列之间」的空隙，不是「内容与列边框之间」的距离。看到文字贴边，该调的是 .col 里的 px-3 或自定义 padding，而不是去碰 gx-——后者一动，整个栅格对齐就乱了。
