card底部对齐不能只靠align-bottom，因其仅对inline元素生效；推荐用d-flex+flex-column+mt-auto组合，或固定高时用position: absolute；align-items-end会导致所有子项挤到底部，不符合常规需求。
Card内部元素底部对齐为什么不能只靠align-bottom
Bootstrap 的 .card 默认是普通块级容器，内部子元素（比如标题、文本、按钮）按文档流自然排列，没有内置的“整体底部对齐”能力。align-bottom 是行内对齐类，只对 inline 或 inline-block 元素生效，对 .card-body 里的段落或按钮无效。直接加这个类没反应，是常见困惑点。
用d-flex + flex-column + mt-auto组合最可靠
这是 Bootstrap 5+ 推荐做法：把卡片内容区设为垂直弹性盒子，再让需要贴底的元素自动撑开剩余空间。
- 给
.card-body添加d-flex flex-column，使其成为纵向弹性容器 - 在要底部对齐的元素（如按钮）上加
mt-auto，它会让该元素“顶住父容器底部” - 注意：必须确保父容器有明确高度（或由内容撑开），否则
mt-auto无空间可“顶”
<div class="card">
<div class="card-body d-flex flex-column">
<h5 class="card-title">标题</h5>
<p class="card-text">一段描述文字</p>
<button class="btn btn-primary mt-auto">操作按钮</button>
</div>
</div>
如果卡片高度固定，position: absolute更直接但需小心
当卡片高度已知（例如 height: 300px），且内容结构简单，可以对底部元素使用绝对定位：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 给
.card-body加position: relative - 给目标元素加
position: absolute; bottom: 1rem（数值按需调整） - 风险：响应式断点下容易错位；若卡片内容变多导致高度溢出，绝对定位元素可能被裁切
- 不推荐用于动态内容或未知高度场景
避免踩坑：align-items-end不是万能解
align-items-end 只控制**交叉轴对齐**（即横向 flex 容器中所有子项右对齐，纵向 flex 容器中所有子项底部对齐），但它不会改变子项在主轴上的顺序和间距——也就是说，它让所有子项“底部边缘对齐”，但它们仍堆叠在顶部，视觉上并不“底部留白”。真正需要的是最后一个元素沉到底部，而不是全部下沉。
所以，align-items-end 配合 flex-column 会导致标题、文字、按钮全都挤在卡片底部，中间没空隙，不符合常规卡片设计预期。
实际项目里，多数卡片底部对齐需求其实只针对操作按钮这类“行动项”，其他内容保持自然流式布局——这时候 mt-auto 才是语义准确、行为可控的选择。
