bootstrap 4 中两列等高唯一可靠做法是给 .row 加 d-flex 类，因其将默认 display: block 改为 flex，激活 align-items: stretch 默认行为；其他如 h-100、flex-fill、height: 100% 均易失效或破坏响应式。
Bootstrap 4 中让两列等高且自适应，唯一可靠做法是给 .row 加 d-flex 类，其他所有“加 h-100”“套 flex-fill”“写 height: 100%”的方案，要么失效，要么破坏响应式。
为什么 d-flex 是必须且足够的
Bootstrap 4 的 .row 默认是 display: block，align-items: stretch 根本不生效。加了 d-flex 后它变成 display: flex，子元素 .col-* 自动参与 align-items: stretch（Flex 默认行为），无需额外声明。
- 别手动写
display: flex——d-flex是 Bootstrap 4 内置工具类，已带浏览器前缀 - 不要在
.row上加flex-wrap: wrap，除非真要换行；小屏下可能意外折行并破坏等高 - 用开发者工具检查
.row的computed display值，确认是flex而非block或grid
哪些样式会直接让等高失效
即使 .row 是 Flex 容器，只要列内存在以下任意一项，.col-* 就无法拉伸：
-
height或min-height：硬编码高度锁死拉伸行为 -
position: absolute：脱离文档流，父列“报告”的高度可能为 0 -
margin-bottom: auto：常用于底部锚定，但会干扰 Flex 高度计算 - 嵌套的
.row：只有外层.row的**直接子元素**参与拉伸，内层断链
内容短、按钮沉底时怎么视觉对齐
等高 ≠ 内容底部对齐。align-items: stretch 只保证容器高度一致，不控制内部元素位置。一列文字少、一列按钮多，短列底部会留白——这时要靠列内部布局：
- 给
.col-*加d-flex flex-column，让它自己成为 Flex 容器 - 把按钮加
mt-auto（等价于margin-top: auto） - 避免给
.col-*加h-100：若列无内容，它无效；若有内容，反而和 Flex 拉伸冲突
卡片（.card）要等高？别碰列
列等高 ≠ 卡片等高。.card 是 .col-* 的子元素，不会自动继承高度：
- 第一步：确保
.col-*有可继承的高度基准 —— BS4 必须同时加d-flex h-100 - 第二步：给
.card加h-100，让它继承列的高度 - 如果要按钮沉底，改卡片内部：
.card加d-flex flex-column h-100，.card-body加flex-grow-1，按钮加mt-auto
最易被忽略的是：等高依赖的是父容器的 Flex 行为和子项的“无干扰”状态，不是某个 magic class。升级 BS 版本或引入第三方样式后，.row 的 display 极易被覆盖 —— 检查 computed styles 比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
