Row 比 Container 宽是设计使然，因左右负边距-15px用于抵消列的padding；但仅当直接嵌套于.container或.container-fluid内才有效，嵌套错误或容器选错会导致溢出。
Row 为什么比 Container 宽？根本不是 margin 写错了
因为 .row 的设计本就“故意”比 .container 宽——它左右各带 margin-left: -15px 和 margin-right: -15px，这是 Bootstrap 栅格系统抵消列（.col-*）默认 padding-left/right: 15px 的关键机制。它不是 bug，是 feature。
但问题来了：这个“故意加宽”只在 .row 直接放在 .container 内时才被正确约束；一旦嵌套错层、或容器本身没设 max-width 限制（比如误用 .container-fluid 又没配内边距），负边距就会把内容真正推出可视区。
-
.row必须直接子元素置于.container或.container-fluid中，不能跳过 - 如果
.row外层是自定义 div 且没设overflow: hidden，负边距会直接导致横向滚动条 - 多个
.row堆叠时，若父级没清除浮动或没形成 BFC，负边距可能叠加放大偏移
常见溢出场景：不是 Row 有问题，是结构松了
最典型的“Row 溢出”，其实八成是嵌套违规或容器选错。比如：
- 把
.col-6直接写在.container里（漏了.row）→ 列的左右padding没被.row的负margin抵消，结果左右各多出 15px，整行变宽 30px - 用了
.container-fluid但内部没加p-4等内边距 → 内容顶到视口边缘，看着像“溢出”，其实是没留白 - 在
.col上手动写了width: 100%或float: left→ 破坏 Flex 布局，让列宽度计算失准 - 响应式断点错配：比如只写
.col-lg-3，小屏下没补.col-12→ 列强行保持大屏宽度，撑爆容器
怎么快速定位是不是 Row 自身导致的溢出？
打开浏览器开发者工具，选中那个“看起来超宽”的 .row 元素，看 computed 样式里的 margin-left 和 margin-right 是否为 -15px；再看它的父容器（应为 .container）的 max-width 和 width 是否符合预期断点（如 lg 下应为 960px）。
- 如果
.row的 margin 是-15px，但父容器宽度明显小于它（比如父 container 计算宽度只有 900px，而 row 内部四列总和 + 间隙 > 930px），说明列内容本身过宽（比如图片没设max-width: 100%） - 如果
.row的 margin 是0或其他值 → 很可能被自定义 CSS 覆盖了，搜一下有没有.row { margin: 0 }这类重置 - 如果父容器是
.container-fluid且width: 100vw，但页面仍有横向滚动 → 检查 body 或 html 是否有默认margin或未清除的伪元素
修复建议：别动 Row 的 margin，改结构或换容器
Bootstrap 的 .row 负边距逻辑非常稳定，强行覆盖它（比如加 .no-gutters 却不配 .g-0）反而容易引发新错。优先做这三件事：
- 确认所有
.col-*都严格嵌套在且仅在一层.row内；一个.row足够容纳全部卡片/模块，不要为每行卡片都套一个.row - 需要全宽布局？换用
.container-fluid，但必须配合p-*工具类（如p-4）控制内边距，而不是靠.container的 max-width “假装”有留白 - 要取消列间距？用
gx-0 gy-0（v5+）或g-0，而不是删.row的 margin —— 后者会让列 padding 失效，内容贴边难看
真正难调的，往往不是 Row 本身，而是你忘了它只是一根“调节杠杆”，真正决定宽度上限的，永远是它上一级容器的 max-width 和内容自身的尺寸约束。
