<p>gx-0 未生效的首要原因是目标元素不是 .row 或未被识别为栅格容器；它仅对 .row 或 display: flex 的直接父容器及其直接子元素 .col-* 生效，常见错误包括加在 .col 上、缺 .row 结构、封装组件未透传、body 默认 margin 干扰、嵌套未用 .row 包裹及 CSS 变量优先级冲突。</p>
gx-0 加在 .row 上却没生效？检查是否漏了 .row 容器
最常见的情况是：你写了 gx-0，但目标元素根本不是 .row，或者它没被正确识别为栅格容器。Bootstrap 的 gx-* 类只对 .row（或 display: flex 的直接父容器）生效，且仅影响其**直接子元素为 .col-*** 的结构。
常见错误包括：
- 把
gx-0加在.col-6上 —— 完全无效，DevTools 里查不到--bs-gutter-x变量 -
.col-*直接放在.container里，中间缺.row—— 此时列的padding-left/right: 15px暴露，左右各空出 15px，看着像“贴边”，其实是 padding 没被抵消 - 用 React-Bootstrap 或其他封装组件，
className="gx-0"没透传到原生<div class="row">上
用了 gx-0 还有白边？先看 body 默认 margin
即使 .row 和 .col 的 gutter 全清了，页面四周边缘仍可能有 8px 白边 —— 这几乎一定是浏览器给 <body> 设的默认 margin: 8px 在作祟。它和你写的任何 padding 无关，而是把整个文档流往里推了一圈。
验证方法：在 DevTools 里选中 <body>，看 computed 样式中 margin 是否为 8px。解决只需一行：
立即学习“前端免费学习笔记（深入）”；
body { margin: 0; }注意：别用 margin: 0 !important，除非你确认没有其他 CSS 显式设置了 body margin。
嵌套 .row 导致“假贴边”？子列 padding 被叠加了
当你在 .col-8 里再放一个 .col-4，又没包 .row，就会出现“看着贴边、实际缩进”的错觉：父列的 padding-right: 15px + 子列的 padding-left: 15px 叠加，导致内容向右偏移 15px，右侧可能被截断。
正确结构必须带嵌套 .row：
<div class="col-8">
<div class="row gx-0">
<div class="col-4">…</div>
</div>
</div>关键点：
- 嵌套的
.row必须加gx-0（或对应 gutter 类），否则会继承外层 gutter 值，造成双倍留白 - 不要给子
.col-*加px-0—— 这只会破坏.row的负 margin 抵消逻辑，让整行左偏
为什么改了 CSS 变量 --bs-gutter-x 还是不贴边？优先级被覆盖了
手动写 style="--bs-gutter-x: 0" 是可行的，但如果你只写在 .row 上，可能被 Bootstrap 自带的高权重选择器（如 .row.gx-0）覆盖。尤其当同时用了 gx-0 和内联变量，后者反而失效。
安全做法：
- 要么纯用工具类：
class="row gx-0" - 要么彻底绕过工具类，用更高优先级选择器重置：
.my-row { --bs-gutter-x: 0 !important; } - 或者直接删掉所有 gutter 相关类，只靠内联变量控制，避免混用
真正容易被忽略的是：gutter 行为永远绑定在 .row 节点上，而不是某个 div 看起来“像一排列”。只要结构不满足 .row > .col-*，任何 gutter 设置都是空转。
