Bootstrap栅格嵌套失效主因是缺失.row或列宽和不为12：.row提供display:flex与负边距，缺则.col退化为block；列宽和≠12会导致换行或留白；HTML非法嵌套（如p内放div）会被浏览器自动修正而破坏结构。
Bootstrap 栅格嵌套失效，90% 是因为跳过了 .row 或列宽加起来不等于 12。 不是浏览器 bug，也不是版本问题，而是 CSS Flex 布局的硬性前提被破坏了。
为什么跳过 .row 就会堆成一竖排
Bootstrap 的 .col-* 类本身不带 display: flex，它只设 flex: 0 0 auto 和 width；真正激活 Flex 行为的是 .row 上的 display: flex 和负外边距 margin: 0 -15px。漏掉这层，.col-* 就退化成普通块级元素。
- 检查 DevTools 中目标
.col-*的 computeddisplay：如果是block而非flex子项，说明父级缺.row - 不要把
.col-md-6直接塞进<header>、<nav>或<p>里——这些标签不是.row，也不提供 flex 容器语义 -
.row必须是.col-*的**直接父元素**；中间插个<div class="wrapper">就断链
.col-* 嵌套时总宽必须严格等于 12
Bootstrap 不做算术校验，只按 class 声明的 flex-basis 渲染。总和 ≠ 12 会导致留白或强制换行，视觉上“错位”“塌缩”“挤到下一行”。
- 三列等宽卡片：用
col-4×3，别用col-3×3（总和=9 → 留白）或col-5×3（总和=15 → 第三列掉下行） - 动态列数不确定？改用
row-cols-3+col，让 CSS Grid 自动均分，避开手算 - 嵌套内使用
col-sm-6 col-lg-4没问题，但同一行所有列的断点后缀数字之和仍得是 12（如col-sm-6+col-sm-6）
HTML 标签嵌套错误会直接破坏栅格结构
浏览器对非法 HTML 会自动修复，比如把 <p><div>xxx</div></p> 强行拆成 <p></p><div>xxx</div>，导致你写的 .col-* 被甩出 .row 外部，栅格彻底失效。
立即学习“前端免费学习笔记（深入）”；
-
<p>、<h1>~<h6>、<dt>这些标签**不能包含任何块级元素**，包括<div>、<section>、<ul>—— 即便你只是想加个class="col-6" - 想在标题区域放栅格？用
<div class="d-flex">或<header class="row">替代<h2>包裹，再在里面放.col-* -
<li>可以包<div class="row">，但<ul>不能直接包.row（<ul>只允许<li>为直接子元素）
嵌套超过三层就该换思路
从 .container → .row → .col → .row → .col → .row 开始，DOM 层级变深、调试成本飙升、CSS 覆盖路径拉长，一个 !important 就可能让整行卡片高度崩掉。
- 三层以上嵌套，优先考虑用
display: grid替代部分.row/.col，保留语义化标签如<article>、<aside> - 卡片高度不一致导致网格断层？给外层
.row加style="align-items: stretch"，并确保每张卡有h-100+d-flex flex-column+flex-grow-1内部结构 - 别在
.col-*里手动加mt-3、pl-2微调——统一用g-3（gap）、py-4（padding-y）等内置间距工具类
