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-* 的 computed display：如果是 block 而非 flex 子项，说明父级缺 .row
• 不要把 .col-md-6 直接塞进 <header></header>、<nav></nav> 或 <p></p> 里——这些标签不是 .row，也不提供 flex 容器语义
• .row 必须是 .col-* 的**直接父元素**；中间插个 <div class="wrapper"> 就断链 <h3> <code>.col-* 嵌套时总宽必须严格等于 12

  Bootstrap 不做算术校验，只按 class 声明的 flex-basis 渲染。总和 ≠ 12 会导致留白或强制换行，视觉上“错位”“塌缩”“挤到下一行”。

  

  html-to-pptx

  将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

  下载
  • 三列等宽卡片：用 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></p> <div>xxx</div>

  强行拆成 <p></p> <div>xxx</div>，导致你写的 .col-* 被甩出 .row 外部，栅格彻底失效。
  • <p></p>、<h1>~<h6></h6> </h1>、<dt></dt> 这些标签**不能包含任何块级元素**，包括 <div>、<code><section></section>、<ul></ul> —— 即便你只是想加个 class="col-6"
  • 想在标题区域放栅格？用 <div class="d-flex"> 或 <code><header class="row"></header> 替代 <h2></h2> 包裹，再在里面放 .col-*
  • <li> 可以包 <div class="row">，但 <code><ul></ul> 不能直接包 .row（<ul></ul> 只允许 <li> 为直接子元素）

    嵌套超过三层就该换思路

    从 .container → .row → .col → .row → .col → .row 开始，DOM 层级变深、调试成本飙升、CSS 覆盖路径拉长，一个 !important 就可能让整行卡片高度崩掉。

    • 三层以上嵌套，优先考虑用 display: grid 替代部分 .row/.col，保留语义化标签如 <article></article>、<aside></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）等内置间距工具类