直接删 .col 的 padding 会破坏 bootstrap 栅格系统，因 gutter 依赖 .row 负外边距与 .col 内边距协同抵消；正确做法是使用响应式工具类如 gx-0 作用于 .row，统一归零水平间距且不破坏布局流。
为什么直接删 .col 的 padding 不行
因为 Bootstrap 的栅格间距（gutter）不是单靠 .col 的 padding 实现的，而是靠 .row 的负外边距（margin-left: -15px / margin-right: -15px）和 .col 的左右内边距（padding-left: 15px / padding-right: 15px）配合抵消出来的。你手动删掉 .col 的 padding，但没动 .row 的负边距，结果就是整行向左/右偏移 15px，容器内容“缩进”或“溢出”。
- 错误写法：
.col { padding: 0 !important; }→ 破坏栅格基线，响应式断点失效 - 更糟的是把
.col套在.container里却漏了.row→ 左右各多出 15px 白边，且无法用 gutter 类修复 - Bootstrap 5+ 明确不鼓励覆盖原始 margin/padding，改用语义化工具类
用 gx-0 彻底取消水平间距最稳妥
gx-0 是 Bootstrap 5.1+ 内置的 gutter 工具类，作用于 .row，表示“horizontal gutter = 0”，它会同时重置 .row 的负外边距和所有子 .col 的左右内边距，一并归零，不破坏 flex 布局流。
- 正确写法：
<div class="row gx-0"> <div class="col-md-6">…</div> <div class="col-md-6">…</div> </div> -
gx-0只影响水平方向，垂直方向（gy-）不受影响；如需全清，用g-0 - 值范围是
g-0到g-5，对应 0–3rem，无需记 px，也自动适配响应式断点（如gx-md-3） - 别用
px-0替代 —— 它只改元素自身内边距，不协调.row负边距，会导致列宽度计算错乱
移动端要无间距、桌面端恢复默认？别用 px-*-0
很多人想“小屏去掉列间距，大屏恢复 15px”，于是写 col px-0 px-lg-2，结果发现列贴太紧或反而错位。这是因为 px-* 类和 gutter 系统互不感知：它强行设 padding-left/right，但 .row 的负边距还是原来的值，两者不再匹配。
- 正确思路：用响应式 gutter 类，例如
gx-0 gx-md-3（移动端无水平间隙，≥md 屏恢复 1rem 间隙） -
gx-md-3对应 Bootstrap 默认的$grid-gutter-width: 1.5rem编译值，语义准确 - 如果项目仍用 Bootstrap 4，没有
gx-类，就只能改 Sass 变量或加 wrapper div + flex gap（需注意 Safari 兼容性）
方形容器对齐错位？先检查 box-sizing 和宽度继承
两列 .col-md-6 里放等宽方块，结果右边总被挤窄一点——大概率不是 gutter 没清干净，而是 .square-container 没设 box-sizing: border-box，又用了固定 width: 200px，导致 padding/border 额外加宽，超出父列可用空间。
- 推荐写法：
.square-container { width: 100%; height: 235px; box-sizing: border-box; } - 更现代方案：用
aspect-ratio: 1 / 1替代固定高，自适应宽度（注意 IE 不支持） - 确认
.col真的没被其他 CSS 干扰：比如display: inline-block或float，这会让 flex 布局退化
.col 直接塞进 .container 却忘了 .row 这一层——这时候无论你怎么调 gx-0 都无效，因为工具类根本没生效对象。
