必须加align-items-stretch类且确保.row是真正的flex容器；否则等高一定失效。根本原因是.row的flex行为被覆盖（如display:block）、子列非直接子元素、.row设height/max-height/overflow:hidden，或有!important覆盖align-items。
必须加 align-items-stretch 类，且确保 .row 是真正的 flex 容器——否则等高一定失效。
为什么加了 .row 两栏还是不等高
根本原因不是 Bootstrap “没做对”，而是 .row 的 flex 行为被悄悄禁用了。Bootstrap 5 的 .row 默认是 display: flex，但以下情况会让它退化：
-
.row被自定义 CSS 或内联样式覆盖成display: block或display: inline-block - 写了
float、position: absolute等脱离文档流的属性 - 媒体查询中加了类似
@media (max-width: 768px) { .row { align-items: flex-start !important; } }的规则
打开浏览器开发者工具，直接看 .row 的 computed display 值——如果不是 flex，就别调 align-items，先修这个。
align-items-stretch 生效的三个硬条件
就算 .row 是 flex，align-items-stretch 也只在同时满足以下三点时才真正拉伸子列：
- 两个
div必须是.row的**直接子元素**（即不能嵌套在额外的<div class="row"> 或 <code><div class="col"> 里） <li> <code>.row不能有height、max-height或overflow: hidden——这些会截断拉伸基准 - 没其他样式用
!important覆盖align-items（比如align-items: flex-start !important） - 给
.card加h-100（不是加在.col上） - 给
.col加d-flex flex-column - 给按钮加
mt-auto - 检查是否在自定义 CSS 中对
.row写了断点覆盖，比如@media (max-width: 992px) { .row { align-items: flex-start; } } - 确认没混用
flex-column和align-items-stretch：垂直方向 stretch 需要容器有明确高度，否则无效 - 若需跨断点强等高（如始终占满视口），可临时加
style="min-height: 100vh;"到顶层.row，但嵌套层级里慎用——它会让子列强行撑高，挤压真实内容
常见错觉：“左边空，右边高”——往往是因为左边 .col 里有个 position: absolute 的按钮，导致该列“报告”的内容高度为 0，无法参与 stretch。
卡片内底部对齐要分两步走
align-items-stretch 只让 .col-* 等高，不会自动让里面的 .card 或文字填满整列。想让按钮钉在底部，得：
如果 .col 本身没内容，h-100 加在它身上是无效的；h-100 必须作用于真正需要撑高的容器（如 .card），且它的父级（.col）得能提供可测量的高度来源——而这又依赖 .row 的 stretch 行为。
响应式断点下等高突然失效
小屏切单列后等高消失是正常行为；但如果在 md 或 lg 下也出问题，大概率是响应式 CSS 在作祟：
最稳的写法就是干净结构：<div class="row align-items-stretch">
<div class="col-md-6">...</div>
<div class="col-md-6">...</div>
</div>。任何额外包裹、固定高度、!important 覆盖，都是等高失效的第一嫌疑点。
