gx-0 未生效的首要原因是目标元素不是 .row 或未被识别为栅格容器；它仅对 .row 或 display: flex 的直接父容器及其直接子元素 .col-* 生效，常见错误包括加在 .col 上、缺 .row 结构、封装组件未透传、body 默认 margin 干扰、嵌套未用 .row 包裹及 css 变量优先级冲突。

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"> 上<h3>用了 gx-0 还有白边？先看 body 默认 margin</h3> <p>即使 <code>.row 和 .col 的 gutter 全清了，页面四周边缘仍可能有 8px 白边 —— 这几乎一定是浏览器给 设的默认 margin: 8px 在作祟。它和你写的任何 padding 无关，而是把整个文档流往里推了一圈。

  验证方法：在 DevTools 里选中 ，看 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，右侧可能被截断。

  

  VPS Bootstrap

  从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

  下载

  正确结构必须带嵌套 .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 设置都是空转。