需先检查 .row 的 computed display 是否为 flex；若显示 block 或未生效，主因是 display 被覆盖、版本混用（如 bootstrap 4 未加 d-flex）、js 动态移除类或嵌套断裂（.col-* 非直接子元素），导致 flex 布局未启动。
检查 .row 的 computed display 是否为 flex
如果 .row 在 DevTools 的 Styles 面板里显示 display: block 或根本没生效，说明 Flex 布局根本没启动——这不是对齐问题，而是基础失效。
常见原因包括：
- 父容器（如
.container）被其他 CSS 覆盖了display，比如插件或重置样式写了div { display: block !important } - Bootstrap 5 的
.row默认就是display: flex，但 Bootstrap 4 需要手动加d-flex；若混用版本，.row可能只是个普通块级容器 - JS 动态移除了
.row类，或通过className = '...'完全覆盖了原有类名，导致row消失
快速验证：在 Elements 面板右键 .row → “Force element state” → 勾选 :hover，看是否触发了 display: flex；没触发就说明类没加载或被干掉了。
确认 .col-* 是 .row 的直接子元素
这是最常被忽略的结构硬伤。Flex 布局只作用于直接子项，一旦中间插了 <form></form>、<section></section>、<div class="wrapper">，<code>.col-* 就脱离了 .row 的弹性上下文，flex-basis 会退化为 auto，列宽、换行、等高全部失效。
在 DevTools 里检查 .col-* 的 computed flex-basis：
- 正常应为百分比值（如
50%、33.3333%） - 若显示
auto或0px，基本可断定嵌套断裂
修复方式不是加 !important，而是重构 HTML：把 <form></form> 移到 .row 外，或让 .row 包住整个表单内容（含 <form></form> 标签本身）。
排查 align-items / align-content 失效的三大干扰源
align-items-center 看似没反应？大概率不是类写错了，而是下面三者之一在捣鬼：
-
.row没有足够高度：如果它只包裹几行文字，自身高度就是内容高度，stretch就没空间可拉。加h-100或min-height: 200px立刻验证 -
.col-*内部有position: absolute元素（比如角标、悬浮按钮），它脱离文档流，不参与高度计算，导致该列“视觉塌陷”，整行等高失效 - 父级设了
overflow: hidden或固定height，直接截断拉伸行为——尤其在卡片列表中，.card高度超出时会被砍掉
临时诊断法：给 .row 加 border: 1px solid red，看边框是否撑开；没撑开，就是高度缺失；撑开了但内容仍顶着上边，就是 overflow 或 absolute 干扰。
Safari / IE11 中 flex-grow-1 不占剩余空间？先看 width
在 Safari 10–14 和 IE11 中，flex-grow-1 经常表现异常：一个固定宽元素 + 一个 flex-grow-1 元素，并排后后者宽度为 0 或极小。这不是 bug，是它们按 flex-basis: auto 计算初始尺寸，而 auto 取的是内容宽度（比如空 div 就是 0）。
解决方法非常具体：
- 给
flex-grow-1元素加内联样式：style="width: 0"，强制基础尺寸归零，让flex-grow有空间可分 - 不要混用
.col-md-6（自带flex: 0 0 50%）和flex-grow-1（flex: 1 1 0%），规则冲突，浏览器会按自己的逻辑 fallback - IE11 还需确认父容器有
display: -ms-flexbox（Bootstrap 4 的d-flex已内置，但若被后续 CSS 重置，就得手动补）
这个点容易被当成“样式没生效”，其实它已生效，只是旧引擎的计算逻辑和现代浏览器不同——你得顺着它的逻辑给提示，而不是对抗它。
