Bootstrap如何让两个不同内容的Card组件在行内保持对齐-Bootstrap教程-PHP中文网

bootstrap卡片底部不对齐需在.row上加align-items-stretch，并确保.card嵌套于.col-*内；再给.card-body加d-flex flex-column h-100及flex-grow-1与mt-auto实现内容吸底和按钮固定。

bootstrap如何让两个不同内容的card组件在行内保持对齐

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高度仍可能参差，导致文字基线或按钮位置不一致。这时要控制的是内容容器，不是卡片本身。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

给每个.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';
});