bootstrap网格嵌套正确的核心是每层列结构必须显式添加.row，且.row必须直接置于.col-内；.col-仅为flex项目，需.row提供flex容器环境及负外边距，否则导致布局错位。
Bootstrap网格嵌套不乱，核心就一条：每新增一层列结构，必须显式加一个 .row，且这个 .row 必须直接放在 .col-* 里面——漏掉、跳级、插在中间，都会让 flex 布局失效，宽度错位、右侧溢出、换行断裂全跟着来。
为什么加了 .col-* 还要再套 .row
因为 .col-* 本身只是个 flex 项目（flex item），不是 flex 容器（flex container）。它不提供 display: flex，也没有负外边距来抵消内边距。只有 .row 才带 display: flex 和 margin: 0 -15px，这样才能让它的子元素 .col-* 正确参与栅格计算。
- 错误写法：
<div class="col-md-6"> <div class="col-sm-6">A</div> <div class="col-sm-6">B</div> </div>→ A 和 B 会独占一行、左右各多出 15px，撑破父容器 - 正确写法：
<div class="col-md-6"><div class="row"> <div class="col-sm-6">A</div> <div class="col-sm-6">B</div> </div></div> - 调试时看 DevTools：父
.col-md-6的 computedpadding-left/right应为15px；子.row的margin-left/right应为-15px；两者必须同时存在
.col-* 的宽度到底是按谁算的
永远按「直接父级 .row 的宽度」算，不是整屏、不是外层 .container，就是上一级列渲染出来的 content box 宽度。嵌套越深，这个基准越小，心算极易翻车。
-
<div class="col-lg-8"><div class="row"><div class="col-md-6">A</div></div></div>→ A 占的是.col-lg-8实际宽度的 50%，不是全屏的 50% - 跨断点混搭（如父用
.col-lg-8、子用.col-sm-6）会导致不同尺寸下占比突变，别靠猜，用 DevTools 查flex-basis或width的 computed 值 - 同一
.row下所有.col-*数字加起来必须 ≤ 12；超了就硬换行，不是缩放，也不是重排
三层以上嵌套怎么避免失控
能用，但每层都得重置布局上下文：加 .row、核对总宽、关掉多余间距。超过两层后，.row 的语义弱化、DOM 深、调试路径长，稍一疏忽就错位。
- 允许结构：
.row → .col-* → .row → .col-* → .row → .col-* - 禁止结构：
.row → .col-* → .col-*（漏.row）、.row → .row（.row不能直接包.row）、.col-* → <p> → .row</p>（中间插非语义标签） - 深层嵌套建议加
g-0关闭 gap，改用mb-2、pe-3等单边距工具类控间距，避免多层gutter叠加爆炸 - 一旦出现跨列对齐、不对称比例（如 20%/60%/20%）或响应式重排需求，硬套嵌套已到极限，该切 CSS Grid 或
d-flex + flex-grow-1
表单、卡片这类内容嵌套时最常踩的坑
表单标签或卡片容器如果插在 .row 和 .col-* 中间，会直接破坏父子关系，导致 .col-* 不再是 .row 的直接子元素——Bootstrap 的 flex 布局就“看不见”它了。
- 错误：
<div class="row"><form><div class="col-md-4">...</div></form></div>→.col-md-4是<form></form>的子元素，不是.row的 - 正确方案一（表单包裹整行）：
<form><div class="row"><div class="col-md-4">...</div></div></form> - 正确方案二（每个卡片独立表单）：
<div class="row"><div class="col-md-4"><form>...</form></div></div> - 卡片高度不齐？光给
.row加d-flex不够，得给每个.col-*加d-flex flex-column h-100，再让.card-body加flex-grow-1
嵌套是否生效，和你写了多少层无关，只取决于每一层的 .row 是否真实存在、是否被正确包裹、是否被其他标签意外打断——这些地方肉眼几乎看不出，必须靠 DevTools 逐层验证 computed 样式。
