直接修改.col的padding或margin会破坏.row与.col的负边距-内边距配对机制，导致整行偏移、换行错乱或嵌套失效；正确做法是使用.no-gutters类成对重置，或手动同步修改.row的margin和子.col的padding。
Bootstrap 4 中不能靠删 .col 的 padding 或给它加 margin 来“干净”消除列间距——那样会破坏栅格基线，导致整行偏移、换行错乱、嵌套失效。
为什么直接改 .col 的 padding 或 margin 会出问题
Bootstrap 4 的 gutter（列间距）靠的是 .row 的负外边距（margin-left: -15px; margin-right: -15px）和 .col 的正内边距（padding-left: 15px; padding-right: 15px）配对抵消实现的。一旦只动 .col 的 padding，.row 的负边距还在，视觉上就会向左/右“缩进”15px；如果加 margin，则总宽度超 100%，必然挤行。
- 常见错误现象：
.col-6加了margin-right: 10px→ 第三列掉到下一行 - 在
.container里直接放.col（漏掉.row）→ 左右各多出 15px 白边 - 用
px-0清除.col内边距 →.row负边距未同步清除，布局流断裂
.no-gutters 是 Bootstrap 4 唯一安全的原生方案
Bootstrap 4 提供了 .no-gutters 类，它会同时重置 .row 的 margin 和所有直接子 .col 的 padding，不破坏配对逻辑。
- 必须加在
.row上，写在.col上无效 - 不响应断点（即无法做到“移动端无间距、桌面端恢复”），如需响应式控制，得手动补媒体查询或升级到 v5+
- 嵌套时，每个需要无间距的
.row都要单独加.no-gutters
示例：
<div class="row no-gutters">
<div class="col-md-6">@@##@@</div>
<div class="col-md-6">
<div class="row no-gutters">
<div class="col-6"><div class="square bg-primary"></div></div>
<div class="col-6"><div class="square bg-secondary"></div></div>
</div>
</div>
</div>
手动覆盖 CSS 时，必须成对重置 .row 和 .col
如果项目无法用 .no-gutters（比如要兼容旧版定制类名），就得自己写 CSS，且必须同时处理两个元素：
- 重置
.row：取消负外边距margin: 0 - 重置子
.col：清除左右内边距padding-left: 0; padding-right: 0 - 不要只改其中一个，否则 15px 偏移立刻出现
- 若用于嵌套结构，子
.row的选择器要更具体（如.row.no-gutters .row），避免误伤外层
例如：
.row.no-gutters {
margin: 0;
}
.row.no-gutters > [class*="col-"] {
padding-left: 0;
padding-right: 0;
}
容易被忽略的关键点
真正难调试的不是“怎么去掉间距”，而是“去掉之后为什么某一层嵌套突然错位”。因为 Bootstrap 4 的 gutter 机制是链式依赖的：父 .row 的负边距影响子 .col 的定位，子 .row 又依赖父 .col 的尺寸和 padding。哪怕只是临时在 DevTools 里删掉某个 .col 的 padding 查看效果，也会让整条链失衡——所以所有改动都必须从 .row 出发，成对操作，且优先用 .no-gutters。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
