bootstrap网格弹性布局失效主因是.row的display未生效为flex或.col-*非其直接子元素；需检查computed display值、dom层级结构及是否误加float/inline-block。
Bootstrap网格弹性布局失效，不是样式没加载就是结构被破坏——display: flex 没生效、.row 高度塌陷、列堆成一列，基本都卡在这两个点上。
检查 .row 的 computed display 是否为 flex
打开 DevTools → 选中任意 .row → 看“Computed”面板里的 display 值。如果不是 flex，说明 Flexbox 被覆盖或未启用：
- 常见干扰源：
display: block或display: inline-block的父级样式（比如 CMS 输出的 wrapper） - 旧版 reset.css / normalize.css 可能重置了
.row的 display 属性 - 自定义 SCSS 中误写了
.row { display: block !important; }（尤其在兼容旧逻辑时） - 如果用了
$enable-flex: false（Bootstrap 4 早期配置），那整个栅格系统就退化回 float，但类名仍叫.col-，极易误判
确认 .col-* 是 .row 的直接子元素
这是最常被忽略的硬性规则。只要 .col-md-4 的父元素不是 .row，Flex 布局就彻底失效：
- 典型错误：把
<form></form>或<section></section>插在.row和.col-*之间 - 动态渲染（如 PHP/JS 循环）时，
<form></form>开闭位置错位，导致部分.col-*实际挂在<form></form>下，而非.row - 使用了
container-fluid > col-*这种跳级结构（漏掉.row）——Bootstrap 5 不再容忍这种写法，.col-*会变成普通块级元素
排查浮动/inline-block 对 flex item 的污染
即使 .row 是 flex，只要子元素带 float: left 或 display: inline-block，它就自动脱离 flex 上下文，宽度收缩、顺序错乱：
- 检查
.col-*元素自身是否被加了float（旧项目迁移时常见） - 检查其子元素（比如卡片容器、表单域）是否用了
inline-block—— 这会让它无视父级.col-8的宽度约束，只按内容撑开 - 修复方式不是加
!important强制 width，而是移除浮动/inline-block，改用flex或grid内部布局 - 若必须保留 inline-block，补一句
width: 100%或改用display: block+text-align控制对齐
启用 Bootstrap 5.2+ 的 CSS Grid 替代方案（绕过 flex 冲突）
当旧代码无法重构、又必须用栅格时，.g-col-* 是真正的兜底选择——它不依赖 .row，也不吃浮动干扰：
- 必须提前在 SCSS 中启用：
$enable-cssgrid: true，且要在@import "bootstrap/scss/functions"之前声明 - CDN 的
bootstrap.min.css默认关闭该功能，.g-col-4会被浏览器完全忽略 - 用法极简：
<div class="g-col-4">…</div>可直接放在任意块级容器里，无需.row - 注意：它和
.col-*不共存于同一行，混用会导致 grid 容器内 flex item 行为异常
真正难处理的从来不是 flex 失效本身，而是失效后你还在试图用旧思路修——比如给 .col-* 加 !important 宽度，或者反复调 z-index。先看 computed display，再查 DOM 树层级，最后才动编译配置。顺序错了，越修越偏。
