Bootstrap默认Card高度不对齐是因为内容长度不同且height为auto，父容器无法自动拉齐；需用Grid布局或h-100+Flex组合（要求.row、.col、.card均加h-100且.card-body不设固定高）实现等高。
为什么Bootstrap默认Card高度不对齐
因为每个 .card 内容长度不同，height 默认是 auto，导致父容器（比如 .row 或 .card-group）无法自动拉齐所有卡片高度。这不是Bug，是Flex布局的正常行为——子项按自身内容撑开，除非显式约束。
用CSS Grid实现等高Card最直接
在父容器上启用Grid并设置列轨道，所有子 .card 会自然等高。比Flex更可控，且无需JS或额外类名：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
注意：不要把 .card 直接放在 .row 里再套Grid；应让Grid容器直接包裹 .card。否则Bootstrap的 .row 的负margin和display: flex会干扰。
用Bootstrap 5的h-100 + Flex组合要小心顺序
必须同时满足三个条件，h-100 才生效：
- 父容器（如
.row）要有height或min-height，不能是auto - 中间每一层容器（包括
.col）都得加h-100 -
.card自身加h-100，且内部.card-body不设固定height（否则会溢出）
典型结构：
<div class="row h-100">
<div class="col h-100">
<div class="card h-100">...</div>
</div>
</div>
遇到card-img-top高度不一致怎么办
图片尺寸差异会破坏等高效果，尤其当图片没统一裁剪时。解决方案不是给图片设 height，而是用对象拟合：
- 给
.card-img-top加object-fit: cover和固定宽高比容器 - 或者用Bootstrap 5.3+ 的
ratio工具类：<div class="ratio ratio-4x3"><img ...></div> - 避免用
img-fluid单独控制——它只保证响应式缩放，不约束比例
真正麻烦的是文字截断后留白不一致，这时候得靠 card-body 内部用 flex-column + flex-grow-1 拉伸内容区，而不是依赖外部高度对齐。
