flex-fill不能直接让卡片等高，因其仅作用于同级flex项目，而卡片常嵌套在.col中，并非flex容器的直接子项；需用d-flex+flex-column+h-100+flex-fill组合控制.card-body高度以实现底部对齐。
为什么 flex-fill 不能直接让卡片等高
flex-fill 是 Bootstrap 5+ 提供的实用类，它本质是设置 flex: 1 1 auto，用于在 flex 容器中“撑满剩余空间”。但它只对**同级 flex 项目**生效，且前提是父容器为 display: flex —— 而标准的 .card-deck 或 .row + .col 结构中，卡片本身不是直接子项（中间隔了 .col），所以直接给卡片加 flex-fill 没有效果。
常见错误现象：卡片高度参差不齐，底部按钮错位，文字截断不一致。
- 确保卡片容器是 flex 容器（比如用
.d-flex+.flex-wrap），而非仅靠.row -
.col类会重置 flex 相关样式，除非显式覆盖（如加d-flex flex-column） -
flex-fill对min-height或内容高度无强制约束，需配合flex-direction: column和height: 100%才能拉伸卡片主体
正确做法：用 .d-flex + .flex-column + flex-fill 控制卡片内部高度
等高关键不在卡片之间“互相拉伸”，而在每张卡片内部——让 .card-body 占满剩余空间，从而对齐底部按钮。这比强行拉伸整个卡片更可控、兼容性更好。
典型结构：
立即学习“前端免费学习笔记（深入）”；
<div class="d-flex flex-column h-100"> <div class="card-body flex-fill">...</div> <div class="card-footer">...</div> </div>
-
h-100确保卡片容器高度继承自父级（比如.col） -
flex-column让卡片内容垂直堆叠 -
flex-fill应用在.card-body上，使其撑开剩余空间 - 避免给
.card自身加flex-fill—— 它不是 flex 项目，不起作用
配合 Grid 布局时，.col 必须设高度基准
Bootstrap 的 .col 默认是 min-height: 1px，没有明确高度来源时，h-100 无法继承。这意味着即使内部用了 flex-fill，卡片依然不会等高。
解决路径只有两条：
- 给直接父容器（通常是
.row）加style="height: 300px"或min-height（适合固定高度场景） - 更通用的做法：给每个
.col加h-100，并确保其父级（如.row）有高度（比如style="height: 100vh"或由内容撑开） - 注意：Bootstrap 5.3+ 中
.row默认是display: flex，但未设align-items: stretch—— 可手动补上，否则h-100在子.col上可能失效
替代方案：不用 flex-fill，改用 align-items: stretch（更轻量）
如果只是希望同一行卡片自然等高（不涉及内部元素对齐），最简方式其实是依赖 flex 默认行为：.row 是 flex 容器，子 .col 默认 align-items: stretch —— 此时只要卡片自身高度由内容决定，它们就会自动拉伸到最高卡片的高度。
这时候你真正要做的只是：
- 移除所有干扰高度的
min-height或height设置 - 确保
.card没有position: absolute或float等脱离文档流的样式 - 避免在
.card-body中使用height: 100%—— 它可能触发循环依赖，导致渲染异常
这个方案不依赖 flex-fill，更少 DOM 层级，CSS 计算也更简单。只有当需要内部元素（比如按钮）严格底对齐时，才值得引入 flex-column + flex-fill 组合。
