bootstrap 3嵌套失效的根本原因是.row的margin与.col-的padding必须精确对冲，漏掉.row或父列不在合法上下文会导致padding叠加、负边距失效、浮动溢出；必须严格遵循.container→.row→.col-→.row→.col-*链式结构。
Bootstrap 3 嵌套时 .row 的 margin 不被抵消
根本问题不是“嵌套本身危险”，而是 Bootstrap 3 的栅格依赖 .row 的 margin: 0 -15px 与父级 .col-* 的 padding: 0 15px 精确对冲。一旦嵌套层级里漏掉 .row，负外边距就失去作用对象，直接把内容顶出父容器右边界。
常见错误结构：<div class="col-md-6"><div class="col-sm-4">内容</div></div>——子 .col-sm-4 继承了父 .col-md-6 的左右 15px 内边距，又自带一套 15px，合计左右各 30px 内边距，而没人来用负外边距拉回来。
- 验证方式：在 Chrome DevTools 中检查子
.col-*元素的 computedpadding-left和padding-right，若显示为30px左右，说明已叠加 - Bootstrap 3 默认用
float布局，.row的overflow: hidden（清浮动）也参与宽度约束，漏掉会导致浮动元素脱离文档流，进一步加剧溢出 - 别试图用
width: 100%强行压子列——它不解决 padding 叠加，反而可能让文字换行错乱
父级 .col-* 不在合法上下文中导致 padding 失效
即使你写了 .row，如果它的父级 .col-* 自身没被包在 .row 里（比如直接塞进 或自定义 <div>），那这个 <code>.col-* 的 padding 就不会生效——因为 Bootstrap 3 的 .col-* 类只在 .row 的子元素中才被设计为“带内边距的列”，否则它只是个普通 float 块。
结果就是：子 .row 的 margin: 0 -15px 没有对应的 padding 可抵消，负边距裸奔，内容向左/右多推 15px。
- 正确前提链必须完整：
.container→.row→.col-*→.row→.col-* - Bootstrap 3 不支持
.col-*直接作为.container的子元素；若跳过.row，.col-*的width仍会计算，但padding往往被浏览器重置或忽略 - 用 DevTools 查父
.col-*的 computedpadding，若不是0 15px，说明它不在有效栅格上下文中
小屏幕断点混用放大嵌套偏差
Bootstrap 3 的响应式类（如 .col-xs-6、.col-md-4）在不同视口下启用不同 width，但它们都共享同一套 padding 和 float 行为。嵌套时若父列用 .col-md-8、子列用 .col-xs-6，小屏下父列实际宽度变窄，子列却按“占父列 50%”计算，而 15px 固定内边距占比陡增，极易撑破。
- 例如：
<div class="col-md-8"><div class="row"> <div class="col-xs-6">A</div> <div class="col-xs-6">B</div> </div></div>，在 xs 下父列可能只剩 ~300px 宽，两个子列各分得 ~150px，但各自还有15pxpadding，内容区只剩 ~120px，长文本或按钮立刻溢出 - 避免跨断点混用嵌套列宽；统一用
.col-xs-*开头，再逐级增强（如.col-xs-6 .col-md-4），确保小屏基线稳定 - 不要依赖“看起来差不多”：
.col-xs-5 + .col-xs-5 + .col-xs-1 = 11，缺的那 1 列不会自动补空，而是让所有列强行压缩，间距和换行全乱
input-group、table 等内联组件加剧溢出
Bootstrap 3 的 .input-group 用 display: table 实现，<table> 默认不收缩，它们放在窄 <code>.col-xs-* 里时，会无视父列 width，坚持按内容撑开——而嵌套后父列可用宽度本就缩水，矛盾立刻爆发。
- 典型现象：
.col-xs-4里放.input-group，右侧按钮硬顶破右边界，滚动条出现 - 临时解法：给
.input-group加width: 100%和box-sizing: border-box，强制服从列宽 - 更彻底方案：替换为纯 CSS flex 实现的输入组（需额外样式），或改用
.col-xs-12单独一行承载表单控件 - 注意
<table class="table"> 在窄列中默认不响应式；必须手动加 <code>table-responsive容器，且该容器不能是嵌套的.row子元素，否则又触发 margin/padding 错位嵌套本身不增加复杂度，但每漏一层
.row或错配一个断点，都会让 padding、margin、float、width 四者之间的脆弱平衡崩掉一次。最常被忽略的是：Bootstrap 3 的栅格不是“写上类就排好”，而是靠这一整套盒模型咬合关系活着——断一环，满盘偏。
