bootstrap嵌套出问题主因是.row与.col-的margin/padding未正确抵消；.row需严格置于.col-内，且.col-*必须是上层.row的直接子元素，否则负边距失效导致内容溢出。
Bootstrap 复杂嵌套出问题，90% 是因为没理解 .row 和 .col-* 在盒模型里怎么咬合——它不是“写上就能用”的装饰类，而是靠 margin 和 padding 精确抵消才能成立的布局开关。
为什么嵌套后内容撑出父容器、出现横向滚动条
直接原因是 .row 的 margin: 0 -15px 没被父级 .col-* 的 padding: 0 15px 正确截断。负边距一旦失去抵消对象，就会把内容推到父容器边界之外。
- 常见错误写法：
<div class="col-md-6"><div class="row">...</div></div>—— 看似对，但若这个.col-md-6自身不在.row内（比如直接塞进<main></main>或<p></p>），它的padding就不会触发，.row的负边距就裸奔了 - 正确前提：父级必须是语义完整的
.col-*，且该.col-*必须是某个.row的**直接子元素** - 调试技巧：在 Chrome DevTools 中选中父
.col-*，看 computed 样式里padding-left/right是否为15px；再看子.row的margin-left/right是否为-15px；两者必须同时存在且数值匹配
嵌套时 col-* 的百分比到底按谁算
.col-6 永远是占其**直接父级 .row 宽度的 50%**，而这个 .row 的宽度，又取决于它所处的 .col-* 的实际渲染宽度——不是整屏，也不是外层 .container，就是上一级列的 content box。
- 例如：
<div class="col-lg-8"><div class="row"> <div class="col-md-6">A</div> <div class="col-md-6">B</div> </div></div>，A 和 B 各占整行的8/12 × 50% = 33.333%，不是 50% - 别心算嵌套结果，尤其跨断点（如
.col-lg-8+.col-md-6）——不同尺寸下基准列宽变化，占比会跳变 - 真要确认比例，用 DevTools 查
flex-basis或width的 computed 值，比肉眼判断可靠十倍
三层及以上嵌套还能不能用 row + col
能，但必须每层都重置布局上下文：新增一层，就加一个 .row，且确保它只出现在 .col-* 内部，不跳级、不省略。
- 允许的结构：
.row → .col-* → .row → .col-* → .row → .col-* - 禁止的结构：
.row → .col-* → .col-*（漏.row）、.row → .row（.row直接子元素不能是.row）、.col-* → <p> → .row</p>（中间插了非语义标签） - 超过两层后，建议用
g-0关闭深层.row的 gap，改用mb-2、pe-3等单边距工具类控制间距，避免多层gap叠加失控 - 如果需要跨列对齐、不对称比例（如 20%/60%/20%）或响应式重排，硬套嵌套已到极限，该切 CSS Grid 或用
d-flex+flex-grow-1手动控宽
最常被忽略的一点：嵌套是否生效，和你写了多少层无关，只取决于每一层的 .row 是否被包裹在合法的 .col-* 里，以及这个 .col-* 是否真的渲染出了带 padding 的块级盒子——其他都是表象。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
