Bootstrap列间隙（gutter）是精心设计的机制，由.row负外边距与.col正内边距配对实现，确保列间30px留白且内容对齐；错误清除.col内边距会破坏配对，导致偏移、错位；应使用gx-*类控制.row间隙，而非修改.col。
Bootstrap的列间隙（gutter）是设计出来的，不是bug
它默认存在，而且必须存在——否则相邻列会紧贴在一起，文字、边框、背景色都会打架。这个间隙叫 gutter，本质是 .row 的负外边距 + .col 的正内边距配对实现的视觉留白，不是随便加的 margin 或 padding。
常见错误现象包括：列看起来“被挤窄了”、右侧内容被截断、两列卡片之间空白过大或过小、响应式切换时错位。这些都不是渲染异常，而是你动错了地方。
-
.row默认有margin-left: -15px和margin-right: -15px -
.col默认有padding-left: 15px和padding-right: 15px - 两者相抵后，列内容区域才真正对齐容器边界，同时列之间留下 30px 总间隙（左右各 15px）
为什么加 mx-0 或 px-0 在 .col 上会出问题
手动清掉 .col 的左右 padding，等于只拆了一半配对机制：.row 还在拼命往左/右拉，.col 却不往外撑，结果就是整行向左偏移、右侧留白、宽度计算失准——尤其在 col-md-6 这类等分场景下，两列加起来可能不到 100%，或者小屏堆叠时换行错乱。
正确做法永远是控制 .row，而不是 .col：
- 要取消所有水平间隙？写
<div class="row gx-0">，不是 <code><div class="col px-0"> <li>要中屏起用 1rem 间隙？写 <code><div class="row gx-md-3">，不是给每个 <code>.col加ms-3 - 想局部加大某两列之间距离？别碰栅格本身，改列内部元素的
ms-auto或mx-3 -
gx-0→ 设置--bs-gutter-x: 0 -
gx-md-3→ 在min-width: 768px媒体查询内设置--bs-gutter-x: 1rem - 多个响应式类共存时，高断点覆盖低断点，比如
gx-0 gx-md-2 gx-lg-4就是“小屏无间隙 → 中屏 0.5rem → 大屏 1rem” - Bootstrap 5：加
mx-n3（对应 1rem 负边距），因为默认 gutter 是 1.5rem，n3能基本抵消 - 不要用
ml-n3 mr-n3，响应式断点切换时可能漏掉一边 - 如果嵌套太深（比如 row → col → row → col），建议换用
display: grid+gap，更可控
响应式 gutter 类写在哪、怎么生效
gx-*、gy-*、g-* 这些类名只对 .row（或启用了 display: flex 的容器）有效，加在 .col 或任意 div 上完全没反应，DevTools 里也查不到对应样式规则。
它们背后是 CSS 自定义属性驱动的：
注意：no-gutters 是 Bootstrap 4 的废弃类，Bootstrap 5 里写了也不生效，别再用了。
嵌套列时间隙变大，怎么收回来
当你在 .col 里再放一个 .row，就出现了两层 padding+margin 叠加：外层 .col 的 padding 还没被抵消完，内层 .row 又自带负边距——结果就是嵌套区域“鼓出来”一块空白。
解决方法很简单：在嵌套的 .row 上加负边距类，告诉它“这里不用再往外拉了”：
真正的复杂点在于：这个“间隙”不是独立存在的，它和断点、flex 换行、box-sizing、甚至自定义 $grid-breakpoints 都耦合在一起。调一个值，得同步看三处表现——.row 宽度、.col 内容对齐、小屏堆叠行为。别指望一招清零就能万事大吉。
