卡片内容区域对齐失效主因是卡片高度未统一且子元素缺乏显式对齐策略；需用d-flex flex-column+justify-content-between配合h-100约束高度，mt-auto实现按钮吸底，避免依赖text-center或min-height。
卡片内容区域对齐失效的常见原因
Bootstrap 5 的 .card 默认不强制内部内容对齐，尤其是当标题、文本、按钮高度不一致时，.card-body 内的元素会按默认文档流堆叠，导致视觉错位。最常被忽略的是：卡片高度未统一，或子元素未显式设置对齐策略。
用 flex-column + justify-content-between 控制垂直分布
这是最可控的方式，适用于标题+描述+底部按钮这类三段式结构。需将 .card-body 设为 flex 容器，并确保其高度有约束（否则 justify-content-between 无效果）。
<div class="card h-100">
<div class="card-body d-flex flex-column justify-content-between">
<h5 class="card-title">标题</h5>
<p class="card-text mb-0">简短描述</p>
<button class="btn btn-primary mt-auto">操作</button>
</div>
</div>
-
h-100是关键：父卡片必须有明确高度（如配合row-cols-*或固定高），否则 flex 布局无法计算“之间”的间距 -
mb-0防止<p></p>底部外边距干扰对齐位置 -
mt-auto让按钮“吸底”，比单纯用margin-top: auto更符合 Bootstrap 语义
水平居中卡片内单行文本或图标
不要依赖 text-center 直接加在 .card-body 上——它会让所有子元素都居中，破坏标题左对齐惯例。更稳妥的是针对具体元素控制：
- 仅居中图标：
<div class="text-center"><i class="bi bi-heart"></i></div> - 仅居中按钮：
<div class="d-flex justify-content-center"><button>提交</button></div> - 标题+图标组合居中：把
h5和图标包进一个d-flex justify-content-center align-items-center容器里
多卡片网格中保持内容基线对齐
当使用 row row-cols-3 等响应式栅格时，不同卡片的 .card-title 行数不一致会导致底部按钮高度参差。纯 CSS 方案是给标题设固定行数和截断：
.card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 3.5rem; /* 2行 × 行高 + 余量 */
}
- 避免用
min-height硬撑——它无法解决文字换行导致的动态高度差异 - 如果必须保留完整标题，就改用 JavaScript 统一所有卡片的
.card-body高度（取最大值），但这是次选方案 - Bootstrap 5.3+ 支持
card-group，但它只保证卡片外框等高，不处理内部对齐
真正起作用的永远是「容器高度约束 + flex 分布」，而不是试图靠 margin/padding 微调。一旦卡片进入响应式网格，手动调像素就不可维护了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
