最常见原因是列内部存在脱离文档流或高度不可测的元素，如position: absolute子元素、未设max-width: 100%的图片，或显式设置了height/min-height/flex-shrink: 0，导致align-items: stretch失效；同时需确保列是.row直接子元素且无媒体查询覆盖该属性。
为什么加了 d-flex 还是不等高
最常见原因是列内部存在脱离文档流或高度不可测的元素，导致 Flex 容器无法正确计算交叉轴（高度）基准。比如：position: absolute 的子元素完全不参与高度计算，所在列会“塌陷”；图片没设 max-width: 100% 或 height: auto，可能单侧撑高但不触发拉伸逻辑。
另一个高频干扰项是显式设置了 height、min-height 或 flex-shrink: 0 在列上——这会覆盖默认的 align-items: stretch 行为。
- 检查列是否被嵌套在非直接子级结构中，例如
<div class="row"><div class="col"><div class="row">…</div></div></div>：内层.row不是外层.row的直接子项，等高失效 - 确认没有媒体查询意外重写
align-items，比如@media (max-width: 768px) { .row { align-items: flex-start !important; } } - 若用 Bootstrap 4，必须加
d-flex；Bootstrap 5 默认已是display: flex，但若引入了重置 CSS 或手动写了display: block，仍需排查覆盖
align-items: stretch 失效的典型场景
这个属性是等高的核心机制，但它只在父容器有“可测量高度”时才可靠生效。如果父容器高度由内容撑开（即无明确 height 或 min-height），而某列内容极短，stretch 仍会拉伸它——但视觉上可能被 padding/margin/box-shadow 干扰对齐感。
- 列内卡片（
.card）的border和box-shadow不影响高度计算，但padding会增加内部内容高度，造成“看起来不齐” - 文字溢出或长 URL 撑破列宽时，
word-break: break-word必须加在文本容器（如<p></p>）上，而非列本身 - 不要在
.row上设overflow: hidden，它会裁剪掉拉伸后超出的部分，让等高“消失”
Bootstrap 4 与 5 的关键行为差异
Bootstrap 4 的 .row 默认是 display: block，必须加 d-flex 才能激活 Flex；Bootstrap 5 的 .row 默认就是 display: flex，但它的 align-items 值依赖于未被覆盖的原始样式。
- BS5 升级后还加
d-flex？小心嵌套 Flex：外层.row已是 flex，再加d-flex可能引发双重 flex 容器，导致子项宽度计算异常 - BS4 若混用了旧版栅格 CSS（比如 CDN 错误加载了 BS3 文件），
float会和d-flex冲突，列直接塌陷 - 两者都要求列是
.row的**直接子元素**；.col-*类本身含flex: 0 0 auto，若想强制等宽，改用flex-1更稳妥，但别混用.col-*和flex-1在同一行
响应式断点下等高突然失效怎么办
小屏切单列后等高自然解除，这是预期行为。但如果在 md 或 lg 下等高变差，大概率是响应式类干扰了 Flex 行为。
- 避免在断点中使用
flex-column后还保留align-items: stretch：垂直主轴下 stretch 需要容器有明确高度，否则无效 - 若需跨断点强等高，可在
.row上加style="min-height: 100vh;"，但仅限全屏布局，别滥用在普通内容区 - Bootstrap 5.3+ 支持
justify-content-evenly，但等高无关主轴对齐；真正影响等高的只有align-items和容器高度上下文
真正卡住人的从来不是 Flex 本身，而是嵌套层级、响应式覆盖、以及那些没写进文档却悄悄重置了 display 或 align-items 的自定义 CSS。
