row 必须嵌套在 container 内，因 container 的15px左右内边距需被 row 的-15px外边距抵消，否则导致溢出、间距错乱及响应式失效；container 与 container-fluid 对 row 的宽度约束不同，且 row 可在 col 内直接嵌套使用。
Container 和 Row 不是并列关系，而是嵌套依赖关系：Row 必须作为 Container 的直接子元素，否则栅格对齐、间距和响应式行为会全部失效。
为什么 .row 一定要放在 .container 里面
因为 .container 提供了关键的左右各 15px 的 padding，而 .row 用左右各 -15px 的 margin 主动抵消它——这是 Bootstrap 栅格“不撑破容器”的核心机制。如果把 .row 直接丢在 或其他非 .container 元素下：
-
.row的负外边距没东西可抵消，会导致内容向左/右溢出视口 - 所有
.col-*的15px水平内边距叠加后，列间间距变成30px，但首尾列无法贴边 - 响应式断点（如
md、lg）的宽度计算会错位，.container的固定宽度（如970px）不会生效
.container 和 .container-fluid 对 .row 的影响差异
两者都允许放 .row，但行为完全不同：
-
.container是固定宽度 + 居中：750px（sm）、970px（md）、1170px（lg），.row会被约束在这个宽度内 -
.container-fluid是 100% 宽度，.row会铺满整个视口，但依然需要它的-15pxmargin 来对齐内部.col-* - 误用
.container-fluid套多层.row容易导致水平滚动条，尤其在小屏下——因为.row的负 margin 会突破父级边界
常见错误写法及对应现象
这些结构一眼就能看出问题：
-
<div class="row"><div class="col-md-6">...</div></div>→ 没有.container包裹，页面左右出现滚动条或内容偏移 -
<div class="container"><div class="col-md-6">...</div></div>→.col-*不是.row的直接子元素，列宽失效，变成块级堆叠 -
<div class="container"><div class="row"><div class="container"><div class="row">...</div></div></div></div>→ 多余嵌套.container，造成双层15pxpadding 叠加，内容严重缩进
嵌套时 .row 的特殊作用
在 .col-* 内部再用栅格，不需要再套 .container，直接用 .row 即可：
-
.col-md-8内部写<div class="row"><div class="col-md-6">...</div></div>是合法的 - 此时该
.row的-15pxmargin 抵消的是外层.col-*的15pxpadding，逻辑复用，不是 bug - 但禁止在
.row里再放.row（无.col-*中转），这会破坏浮动清除和负边距链
真正容易被忽略的是：.row 的 margin 和 .col-* 的 padding 是成对设计的“抵消契约”，任何打破这个链条的操作（比如删 .row、加多余 .container、用其他元素包裹 .col-*），都会让整行栅格失去视觉一致性。这不是约定，是 CSS 级别的硬依赖。
