.row不在.container内会因-15px负边距无padding可抵消而左右溢出15px，导致内容错位或触发水平滚动条；唯一例外是嵌套在.col-*内时，其负边距可抵消父列的15px内边距。
row 不在 container 里会直接错位或溢出
因为 .row 的左右 margin 是 -15px，它的设计目的就是抵消 .container 的 15px 左右 padding。如果 .row 没有父级 .container 提供这层 padding，那 -15px 就没东西可抵消，结果就是整行向左/右各多顶出 15px——轻则内容贴边难看，重则触发水平滚动条，尤其在小屏下非常明显。
row 在 container 外的典型错误现象
常见表现不是“没效果”，而是“效果反常”：
-
<div class="row"><div class="col-6">A</div></div>→ 页面左右出现 15px 空白或滚动条 -
<div class="container-fluid"><div class="row">...</div></div>→ 小屏下容易因负 margin 突破视口边界，导致截断或横向滑动 -
<div style="padding: 20px"><div class="row">...</div></div>→ 自定义 padding 干扰了栅格对齐基线，列宽计算失准
container 给 row 提供的不只是 padding
.container 还承担三项不可替代的作用：
- 提供响应式最大宽度（如
lg下960px），让.row有明确的“撑满目标” - 强制居中，使
.row的负 margin 能对称生效，否则.row会靠左对齐并溢出右侧 - 作为栅格系统的上下文锚点：Bootstrap 的 CSS 规则（如
.container > .row）隐含依赖这个结构层级，缺了就可能跳过某些重置样式
什么情况下可以不用 container 包 row
只有一种合法例外：.row 出现在 .col-* 内部时，不需要再套 .container：
<div class="container"><div class="row"><div class="col-md-8"><div class="row"><div class="col-6">嵌套列</div></div></div></div></div>
这时内层 .row 的 -15px margin 抵消的是外层 .col-md-8 的 15px padding，逻辑复用，不是绕过规则——但前提是外层 .col-* 必须是某个 .row 的直系子元素，而那个 .row 又必须在 .container 里。
最易被忽略的点：不是所有“看起来像容器”的 div 都能替代 .container；哪怕你手写 max-width: 960px; margin: 0 auto; padding: 0 15px，只要没加 .container 类，某些 Bootstrap 工具类（如 gx-*）或 JS 插件可能无法识别上下文，导致响应行为异常。
