Bootstrap卡片底部不对齐需在.row上加align-items-stretch，并确保.card嵌套于.col-*内；再给.card-body加d-flex flex-column h-100及flex-grow-1与mt-auto实现内容吸底和按钮固定。
Card高度不一致导致底部不对齐怎么办
Bootstrap默认的.card不会自动拉伸高度，当两张卡内容长度不同（比如一张有长段落、一张只有标题和按钮），它们的底部就会错位——这是最常被问到的对齐问题。
根本原因是Flex容器未启用align-items: stretch，且子项未显式设置高度或flex行为。
- 确保父容器是
.row，子项是.col-*包裹的.card（不能直接把.card放.row里） - 给
.row加class="row g-3 align-items-stretch"——align-items-stretch才是关键，不是align-items-center - 移除所有手动设置的
height或min-height，让Flex自然撑开
内容区域高度不均时如何统一卡片主体高度
即使卡片整体拉齐了，内部.card-body高度仍可能参差，导致文字基线或按钮位置不一致。这时要控制的是内容容器，不是卡片本身。
- 给每个
.card-body加class="d-flex flex-column h-100"，使其占满父级高度 - 在
.card-body内，让正文区域用flex-grow-1吸底，按钮固定在底部：<div class="card-body d-flex flex-column h-100"> <p class="flex-grow-1 mb-3">内容文本...</p> <button class="btn btn-primary mt-auto">操作</button> </div>
- 避免对
.card-title或.card-text单独设min-height，这会破坏Flex流式布局
使用Bootstrap 5.3+的card-group是否更简单
可以，但要注意.card-group只适用于并列、无栅格间隔的场景，它会强制移除边距、禁用响应式断行，且不兼容.col嵌套。
- 如果只是两卡并排、不需要
.col-md-6这类响应式控制，用<div class="card-group">...</div>确实一行代码搞定 - 但它内部用的是
display: flex+flex: 1，无法和.row/.col混用；一旦加.col，.card-group就失效 - 若需间隙（
g-3）、换行（col-lg-4）、或右侧留白，必须放弃.card-group，回归.row.align-items-stretch方案
IE11兼容性下align-items-stretch失效怎么处理
IE11对Flex的align-items: stretch支持不完整，尤其当子项含border或padding时容易塌陷。这不是Bootstrap bug，而是底层渲染限制。
- 不要依赖
align-items-stretch，改用显式等高：给每个.card加style="height: 100%"，同时确保父.col有明确高度（如min-height: 200px） - 或者用JS补丁：
document.querySelectorAll('.row.align-items-stretch .card').forEach(card => { const height = Math.max(...Array.from(document.querySelectorAll('.row.align-items-stretch .card')).map(c => c.scrollHeight)); card.style.height = height + 'px'; }); - 更稳妥的做法是放弃IE11支持——Bootstrap 5官方已停止IE支持，强行兼容只会增加不可控的CSS hack
真正麻烦的不是怎么写类名，而是没意识到.row必须配合.col才能触发Flex上下文，以及align-items-stretch对子元素display属性的隐含要求。漏掉任意一环，卡片都会“看起来该对齐却没对齐”。
