根本原因是.row自带margin-left:-15px和margin-right:-15px，若未嵌套在.container或.container-fluid中，负边距溢出视口触发水平滚动条；标准解法是确保.row始终被.container或.container-fluid包裹。
为什么 .row 会导致页面出现水平滚动条
根本原因是 .row 自带 margin-left: -15px 和 margin-right: -15px，目的是抵消其子元素 .col-* 的左右 padding（各 15px），从而实现“视觉上顶满容器”的效果。但一旦 .row 没被正确包裹在 .container 或 .container-fluid 内，这些负边距就会溢出到视口边界外，触发浏览器渲染水平滚动条。
.row 外部没有 .container 时的典型错误表现
常见现象包括：页面底部出现意外的水平滚动条、右侧留白或内容被裁切、开发者工具里看到 body 宽度 > 100vw。
- 直接把
<div class="row">放在<body>下，没套任何 container —— 这是最常踩的坑 - 自定义了
.container的padding或max-width，但没同步调整.row的负 margin 值 - 用 Flex 或 Grid 布局包裹
.row，而该父容器未设overflow: hidden，导致负 margin 外泄
如何安全抵消 .row 的负 margin
不推荐直接覆盖 .row 的 margin（破坏 Bootstrap 原意且易引发连锁样式问题），应通过容器级修复：
- 标准解法：确保每个
.row都嵌套在.container（固定宽度）或.container-fluid（100% 宽度）内 - 无边距需求时：用
<div class="container-fluid px-0"><div class="row mx-0">.../div>，其中mx-0覆盖负 margin，px-0清除容器左右 padding - Flex 场景下：给
.row的直接父容器加style="overflow: hidden"，临时截断溢出（仅限无法改结构时应急）
Bootstrap 5+ 中容易被忽略的兼容细节
Bootstrap 5 移除了部分全局 box-sizing 重置逻辑，如果你项目中混用了旧版 reset.css 或自定义了 * { box-sizing: border-box } 外的规则，.row 的 margin 计算可能和预期不一致。
立即学习“前端免费学习笔记（深入）”；
- 检查是否全局设置了
box-sizing: content-box，它会让 padding 和 margin 的叠加行为更难预测 -
.container-fluid在某些主题中被设为max-width: 100%但未加width: 100%，导致内部.row的负 margin 仍会撑宽父级 - 使用 Sass 编译时，若修改了
$grid-gutter-width变量（如改成 20px），必须同步确认.row的 margin 是否也按新值重写了（默认仍是 -15px）
负 margin 本身不是 bug，是 Bootstrap 网格对齐机制的关键一环；问题永远出在“它该被谁收住”——这个责任不能甩给 .row 自己承担。
