Bootstrap的Row水平滚动条出现，是CSS margin与padding设置抵消导致的吗？

本文共计757个文字，预计阅读时间需要4分钟。

基本原理是使用 `.row` 自带 `margin-left: -15px` 和 `margin-right: -15px`，目的是抵消其子元素 `.col-*%` 的左右 `padding（各15px）。这样可以实现视觉上顶部满容器的效果。但一旦 `.row` 没有被正确包裹在 `.container` 或 `.container-fluid` 内，这些负边距就会导致内容溢出到视口边界，触发浏览器水平滚动条。

.row 外部没有 .container 时的典型错误表现

常见现象包括：页面底部出现意外的水平滚动条、右侧留白或内容被裁切、开发者工具里看到 body 宽度 > 100vw。