卡片高度不一致是因文档流中内容撑开所致，需用flex布局统一：父容器设d-flex flex-wrap，子卡片加flex-fill和min-width，内部用h-100+flex-column+flex-grow-1+mt-auto对齐内容。
卡片高度不一致是因为默认文档流布局
Bootstrap 的 .card 默认是块级元素，高度由内部内容撑开。标题短、文字少的卡片就矮，图文并茂的就高——这不是 bug，是正常流式行为。想统一高度，不能靠硬设 height（会截断内容或留白），得用弹性布局接管子元素的排列逻辑。
给卡片容器加 display: flex 并设置方向
关键不是给单个卡片加 flex，而是让所有卡片处于同一个 flex 容器中，且该容器启用 flex-wrap: wrap（否则会强行横向排一整行）。常见写法是把 .card 包在 .row 或自定义的 .card-deck 里：
<div class="d-flex flex-wrap gap-3"> <div class="card flex-fill" style="min-width: 200px;">...</div> <div class="card flex-fill" style="min-width: 200px;">...</div> </div>
注意三点：
-
flex-fill让卡片在主轴方向尽可能伸展（需配合父容器d-flex） -
min-width防止小屏下卡片被过度压缩变形 -
gap-3替代 margin 手动控制间距，避免 flex 下 margin 折行错位
卡片内部内容对齐要用 flex-column + h-100
即使外部高度统一了，内部标题、正文、按钮仍可能上下浮动。Bootstrap 5+ 提供了现成工具类：
立即学习“前端免费学习笔记（深入）”；
<div class="card h-100">
<div class="card-body d-flex flex-column h-100">
<h5 class="card-title">标题</h5>
<p class="card-text flex-grow-1">正文自动占满剩余空间</p>
<a href="#" class="btn btn-primary mt-auto">按钮沉底</a>
</div>
</div>
这里几个关键点：
-
h-100必须加在.card和.card-body上，否则内部 flex 无高度参考 -
flex-grow-1给正文，让它“吃掉”中间空白，避免文字少时按钮上浮 -
mt-auto比align-self-end更可靠，它把按钮推到 flex 容器底部，不受文字行数影响
IE11 兼容性问题与 fallback 方案
如果项目必须支持 IE11，flex-wrap 和 gap 会失效。此时建议降级使用 Bootstrap 自带的 .card-deck（v4.3+ 已废弃但 CSS 仍有效），或手动加 display: -ms-flexbox 前缀。更稳妥的做法是：只在现代浏览器中启用 flex 对齐，IE 下接受高度不一致，用 @supports (display: flex) 包裹 flex 相关样式。
真正容易被忽略的是：当卡片内含图片时，img 默认是 inline 元素，会在底部留出空白间隙。务必加 img-fluid d-block 或 vertical-align: top，否则 h-100 会因这一像素间隙失效。
