用 display: flex + 默认 align-items: stretch 就能实现两栏等高，但必须满足父容器有可参考高度、子项未锁死自身高度、内容未脱离文档流三个前提；否则因子项设 height/min-height、父容器 height: auto、flex-direction: column 或含 position: absolute 元素等导致 stretch 失效；移动端需用 min-height: 100vh 和 flex: 1 替代 height: 100% 等脆弱写法，并注意 bootstrap 版本差异及卡片 h-100 的正确位置。
直接说结论：用 display: flex + 默认的 align-items: stretch 就能实现两栏等高，但必须满足三个前提：父容器有可参考的高度、子项没锁死自身高度、内容没脱离文档流。
为什么写了 align-items: stretch 还不等高
这不是属性失效，而是它被悄悄绕过了：
- 子项写了
height、min-height或flex-shrink: 0配合固定尺寸，直接阻断拉伸 - 父容器是
height: auto且内部没内容撑开，交叉轴（高度方向）没基准可依 - 用了
flex-direction: column却还指望“等高”——此时align-items控制的是宽度方向，和高度无关 - 子项里有
position: absolute或position: fixed元素，内容脱离文档流，父容器无法正确测量高度
移动端必须加的两个兜底控制
真实场景中，软键盘弹出、地址栏收起、横竖屏切换都会让视口动态变化，仅靠默认行为不够稳：
- 父容器统一用
min-height: 100vh，别用height: 100vh—— iOS Safari 在地址栏动画时会重绘 viewport，height可能瞬间归零 - 子项禁用
height: 100%和min-height（相对单位），改用flex: 1；若需保底高度，写min-height: 44px这类绝对值 - 图片加载延迟易导致初始塌陷：给
<img>加height: auto和max-width: 100%，同时确保其父容器有min-height
Bootstrap 中 .row 上 align-items-stretch 没反应
因为 Bootstrap 4 的 .row 默认是 display: block，不是 Flex 容器 —— align-items 对块级元素完全无效：
- Bootstrap 4：必须手动加
d-flex类，或写自定义类如.equal-height-row { display: flex; } - Bootstrap 5：
.row默认是display: flex，但要检查是否被其他样式覆盖（比如style="display: block"或第三方 reset） - 嵌套结构里，只有
.row的**直接子元素**（即.col-*）才受其align-items控制；子列里的.row需单独处理 - 卡片等高必须加
h-100，但得加在<div class="card"> 上，且它的直接父元素（通常是 <code>.col）要有可参考的高度真正难的不是写对那行 CSS，而是在软键盘弹出、图片异步加载、iOS 地址栏动画这些时刻，
align-items: stretch依然有高度可依、有内容可撑、有渲染可稳。
