根本原因是.row的margin-left: -15px和margin-right: -15px在未被.container或.container-fluid包裹时溢出视口，触发浏览器横向滚动条；需确保.row始终嵌套于正确容器内，并统一box-sizing、约束子元素宽度。
根本原因不是网格本身出错，而是 .row 的负边距在没有正确容器包裹时直接溢出视口 —— 浏览器把它算进布局宽度，触发横向滚动。
检查 .row 是否裸露在 body 或 flex 容器中
Bootstrap 4 的 .row 默认带 margin-left: -15px 和 margin-right: -15px，这是为抵消子元素 .col-* 的左右 padding。但它必须被 .container 或 .container-fluid 包裹，否则这 30px 负边距会“漏”到视口外。
- 常见错误写法：
<body><div class="row">...</div></body>—— 没有容器，.row直接撑宽body - Flex 布局陷阱：用
display: flex包裹.row，但父容器没设overflow: hidden，负 margin 外泄 - 验证方式：在控制台执行
document.body.scrollWidth > window.innerWidth，返回true即确认存在真实溢出
确认 .container-fluid 是否被意外限制宽度
.container-fluid 在 Bootstrap 4 中本应占满视口宽度（width: 100%），但若项目中自定义了它的样式，或全局 CSS 覆盖了其行为，就可能失效。
- 检查是否写了类似
.container-fluid { max-width: 1200px; }—— 这会让它变成固定宽度容器，.row的负 margin 仍会溢出 - 确认没有对
.container-fluid设置padding-left或padding-right，否则叠加负 margin 后更容易超宽 - 临时加
style="border: 1px solid red"到.container-fluid上，肉眼观察是否真正贴边
排查 box-sizing 和全局重置缺失
Bootstrap 4 不自带全局 box-sizing: border-box，而默认的 content-box 会让 padding 和 border 额外增加元素总宽，进一步放大溢出风险。
立即学习“前端免费学习笔记（深入）”；
- 务必在所有样式最顶部加：
* { box-sizing: border-box; } - 特别注意：如果用了第三方 reset.css，确认它没把
box-sizing设回content-box -
.row自身若被加了padding（比如误用px-3），在content-box下会直接加到 100% 宽度之外
移动端缩放后滚动条重现？重点查图片和定位偏移
即使 .row 结构正确，缩放时仍出现滚动条，大概率是子元素溢出 —— 尤其是图片、绝对定位元素或未约束的文本块。
-
<img>必须加max-width: 100%; height: auto;，否则原始尺寸会突破.col宽度 -
position: relative+left: 20px的元素，右边缘可能超出父容器，浏览器仍计入布局宽度 -
white-space: nowrap的文本块（如日志 ID、URL）会强制不换行，撑爆整行 —— 给.col加overflow-x: hidden或对内容加text-overflow: ellipsis
真正麻烦的不是 .row 本身，而是它和外部上下文的边界交接 —— 容器没包住、box-sizing 没统一、子元素没裁剪，三者任一缺失都会让那 30px 负边距变成滚动条的开关。
