flex-fill 不能用于等高列，因其仅影响主轴空间分配且会破坏栅格响应式比例；等高依赖父容器 align-items: stretch 默认行为，而非子项 flex-fill。
flex-fill 不是 Bootstrap 实现等高列的可靠方案，它不控制高度对齐，只影响宽度分配。等高列的核心机制是 align-items: stretch（Flex 容器默认行为），而非 flex-fill。
为什么 flex-fill 不能用于等高列
flex-fill 是 Bootstrap 提供的工具类，等价于 flex: 1 1 auto，作用是让元素“尽可能占满剩余主轴空间”——在水平布局中影响宽度，在垂直布局中影响高度，但前提是父容器有明确的交叉轴尺寸（比如 height 或 min-height）。而等高列的本质是子项自动拉伸以匹配父容器高度，不需要也不依赖 flex-fill。
-
flex-fill在.row中对.col无效：因为.col默认已是flex: 0 0 auto，加flex-fill会破坏响应式比例（如col-md-6失效） - 它不触发
stretch行为：即使加了flex-fill，若父.row的align-items被设为flex-start，列依然不会等高 - 在 Bootstrap 5 中，
flex-fill常用于d-flex容器内的按钮或导航项，不是栅格列的等高手段
Bootstrap 4 和 5 中真正起作用的等高方式
关键不在子项类，而在父容器的 Flex 配置和内容约束是否干净：
-
Bootstrap 5：默认
.row就是display: flex，只要没被覆盖align-items，列天然等高；检查浏览器开发者工具里.row的 computedalign-items是否为stretch -
Bootstrap 4：必须手动加
d-flex类（即display: flex），否则.row是普通block容器，align-items完全无效 - 两栏都必须是
.row的**直接子元素**；嵌套.row会导致stretch断链 - 删掉所有
height、min-height、position: absolute等干扰高度计算的样式
常见错误：误用 flex-fill 导致布局崩溃
比如这样写：
<div class="row"> <div class="col-md-6 flex-fill">短内容</div> <div class="col-md-6 flex-fill">长内容</div> </div>
结果是两列宽度不再遵循 col-md-6（即各占 50%），而是被 flex-fill 强制均分剩余空间，且在小屏下可能错位。更糟的是，如果父 .row 没设 display: flex（BS4）或被重置为 block，flex-fill 根本不生效。
立即学习“前端免费学习笔记（深入）”；
- BS4 下：
flex-fill必须配合d-flex才有效，单独加无意义 - BS5 下：
flex-fill加在.col上会覆盖其flex基础值，导致断点失效 - 真正需要“撑满”的是列内部的卡片：
<div class="card h-100">，不是列本身
该用什么替代 flex-fill 来确保视觉等高
当一列文字少、一列按钮多，光靠 stretch 会让短列底部留白——这时要靠列内 Flex 对齐，而不是改列宽：
- 给每列加
d-flex flex-column，让它变成垂直 Flex 容器 - 把需“钉到底部”的元素（如按钮）加
mt-auto（等价于margin-top: auto） - 避免在列上设
height: 100%：Flex 子项的百分比高度需父容器有显式高度，易引发循环依赖 - 如果用卡片，务必给
.card加h-100，否则卡片高度由内容决定，无法拉齐
等高列真正的复杂点在于嵌套层级和样式污染——align-items: stretch 很脆弱，一行 !important 或一个 overflow: hidden 就能让整行失效。别迷信工具类，先看 computed styles。
