bootstrap栅格列间距异常通常源于.container、.row、.col嵌套不规范：.col必须直接置于.row内，.row必须置于.container内；错误嵌套会导致负边距失效、空白或错位；应使用gx-/gy-/g-工具类调整间距，避免手动修改margin/padding。
Bootstrap 的栅格系统默认列之间有 15px 的左右外边距（gutter），而 .row 本身设置了 margin-left: -15px; margin-right: -15px 来抵消，让整体宽度撑满容器。如果列间距看起来“不对”——比如出现多余空白、列错位、内容被截断或响应异常——通常不是 bug，而是 .container、.row、.col 三者嵌套或使用方式不规范导致的。
检查是否漏掉 .row 或嵌套层级错误
Bootstrap 要求：所有 .col-* 必须直接放在 .row 内，而 .row 必须放在 .container（或 .container-fluid）内。常见错误：
- 把
.col直接写在.container里（缺少.row），会导致列的负边距失效，左右多出 15px 空白； - 在
.col内又嵌套了.row，但忘记给该.col加padding: 0或未理解嵌套规则（子 row 会自动减去父 col 的 padding）； - 多个
.row被包裹在同一个自定义 div 里，且该 div 有 padding/margin，干扰了栅格流。
确认 container 类型与视口匹配
.container 是响应式定宽（如 lg 下最大 960px），.container-fluid 是 100% 宽度。若页面整体偏窄或右侧出现滚动条，可能是因为：
- 误用了
.container-fluid+ 内部内容未约束，导致超宽； - 在小屏幕下仍用大尺寸类（如
.col-lg-6），而没配.col-12基础断点，导致列折叠异常、间距突变； - 自定义 CSS 覆盖了
.container的 max-width 或 padding，破坏了栅格基线。
调整列间距（gutter）的正确方式
Bootstrap 5+ 支持通过工具类快速修改 gutter，**不要手动改 .row margin 或 .col padding**：
立即学习“前端免费学习笔记（深入）”；
- 用
gx-*控制水平间距（如gx-3= 1rem），gy-*控制垂直间距； - 用
g-*同时设置水平和垂直（如g-2）； - 值范围通常是 0–5（对应 0, 0.25rem, 0.5rem…3rem），也支持
gx-0彻底取消间隙； - 示例：
<div class="row gx-4 gy-2">...</div>—— 水平间隙 1.5rem，垂直 0.5rem。
自定义 gutter 或修复旧版本兼容问题
若用的是 Bootstrap 4 或需深度定制：
- 重设
.row的 margin：例如.row.no-gutters { margin: 0; }，再给.col手动加padding: 0； - 通过 Sass 变量调整（推荐）：修改
$grid-gutter-width: 1.5rem后重新编译； - 避免在
.col上写width、float或display: inline-block，这会破坏 flex 布局逻辑。
