Bootstrap栅格系统如何取消间距

直接删 .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 classrow gx-0div classcol-md-6…/divdiv classcol-md-6…/div/divgx-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 的负边距还是原来的值两者不再匹配。 文小言 百度旗下新搜索智能助手有问题问小言。