默认底部对齐是因为.card作为块级元素在非flex流中按基线定位，而.row虽为flex容器但align-items: stretch仅拉伸.col高度，不强制.card顶部对齐；正确做法是给.row添加align-items-start类，使所有.col及其内部.card统一顶部对齐。
Card高度不一致时，为什么默认会底部对齐？
Bootstrap 5 的 .row + .col 布局中，.card 默认是块级元素，且其父容器（如 .col）采用标准文档流布局。当多个 .card 高度不同时，它们的基线（baseline）实际由内部内容决定，而 display: flex 未启用时，CSS 不会自动对齐顶部——尤其在使用 .row（默认 display: flex）但子项未设对齐方式时，align-items 默认为 stretch，这会让所有 .col 拉伸到行内最高项的高度，但 .card 自身仍按自身内容定位，视觉上常表现为“底部参差”或“中间对齐错觉”。
用 align-items-start 强制整行顶部对齐
最直接有效的方式是让 .row 控制子列（.col）的对齐行为，而非调整每个 .card：
-
.row默认是display: flex，所以可直接用 Bootstrap 5 的间距/对齐工具类 - 添加
align-items-start到.row，让所有.col顶部对齐，进而使其中的.card顶部自然对齐 - 无需修改
.card内部结构或加额外 wrapper
<div class="row align-items-start">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<p>短内容</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-body">
<p>这里有一大段文字……</p>
<p>占多行，导致 card 更高</p>
</div>
</div>
</div>
</div>
如果用了 card-deck 或旧版本写法？
card-deck 在 Bootstrap 5 中已被废弃（v5.3+ 完全移除），且它内部依赖 display: table，无法与 flex 对齐类共存。若你还在用它：
- 立刻替换为
.row+.col+align-items-start - 不要尝试给
.card-deck > .card加vertical-align: top—— table-cell 行为下该属性无效 - 若必须兼容旧代码，可用
style="vertical-align: top"强制单个.card，但响应式断点下易失效，不推荐
为什么不用 card-body 设固定高度？
强行统一 .card-body 高度（如 min-height: 200px）看似可行，但会带来副作用：
- 小屏幕下文字换行增多，固定高度可能被撑破或出现滚动条
- 无障碍阅读中，人为截断内容或留白过多影响语义结构
- 与 Bootstrap 的响应式设计哲学冲突：它鼓励内容驱动布局，而非容器驱动
- 一旦卡片内含图片、按钮等可变高元素，维护成本陡增
真正需要控制视觉节奏时，优先用 align-items-start，它只干预布局对齐，不侵入内容尺寸逻辑。
对齐这件事，关键不是“让卡片一样高”，而是“让它们的顶部起点一致”。Flex 的 align-items 正是为此存在——别绕远路去 fix 内容，直接 fix 容器的行为。
