<p>直接给 .col-* 加 px-0 会导致内容错位，因其破坏了 .row 负 margin 与列 padding 的配对机制；正确做法是使用 gx-0（Bootstrap 5.1+）或 no-gutters（Bootstrap 4）作用于 .row。</p>
为什么直接给 .col-* 加 px-0 不管用
因为 .col-* 的左右 padding 是栅格系统 gutter 机制的一部分，不是“多余样式”，而是和 .row 的负 margin 配套工作的。你单独清掉 padding，.row 的 margin-left: -15px 和 margin-right: -15px 还在，结果整行向左/右偏移 15px，内容错位甚至被截断。
常见错误现象：Chrome DevTools 里看到子列的 computed padding-left 和 padding-right 各为 30px（父列 15px + 自身 15px），或右侧内容明显缩进、溢出。
- 别对单个
.col-*加px-0、p-0或!important - 不要用自定义 CSS 直接覆盖
.col-*的 padding，会破坏所有断点响应逻辑 - 真正要动的是
.row层级的 gutter 控制，不是列本身
取消列间间距的正确方式：用 gx-0 或 g-0
gx-0（Bootstrap 5.1+）是专为控制列之间水平间距设计的工具类，它作用于 .row，通过重置其子列的 padding 和自身 margin 关系，实现语义清晰、断点安全的归零。
示例结构：
<div class="row gx-0"> <div class="col-6">左列</div> <div class="col-6">右列</div> </div>
-
gx-0只影响水平方向，垂直方向（gy）不受影响；需要全归零可用g-0 - 支持响应式写法，如
gx-md-3表示仅在 ≥md 断点启用 3 级间距，xs/sm 下仍为 0 - 如果项目还在用 Bootstrap 4，对应类名是
no-gutters（注意拼写无连字符）
嵌套列时漏掉 .row 是最常见根源
当你在 .col-8 里直接放 .col-4，子列既没 .row 抵消父列 padding，又自带 padding，左右各多出 15px，合计 30px 内边距——这根本不是“默认 padding 没取消”，而是结构错误。
验证方法：在 DevTools 中选中子 .col-*，看 Computed 面板的 padding-left 和 padding-right 是否接近 30px。
- 错误写法：
<div class="col-8"><div class="col-4">…</div></div> - 正确写法：
<div class="col-8"><div class="row gx-0"><div class="col-4">…</div></div></div> - 只有当内部真要用
.col-*分栏时才需要嵌套.row；纯文本、卡片等无需额外包裹
全局禁用 gutter？小心副作用
有人想一劳永逸，就全局重置所有 .col-* 的 padding，比如加一条 .col-* { padding: 0 !important; }。这会导致：
-
.row的负 margin 失去配对对象，整行宽度计算错误 - 所有基于 gutter 的响应式行为（如
gx-sm-2）彻底失效 - 第三方组件或插件依赖默认 padding 时出现布局崩坏
真正需要全项目去 gutter 的场景极少。更稳的做法是：只在明确需要贴边的局部区域（如全宽 banner、Canvas 容器）使用 .row.gx-0，其余保持默认。容易被忽略的是——.row 不是装饰，它是栅格系统里唯一能协调 padding/margin 关系的节点。
