本文介绍如何使用 flexbox（结合 bootstrap 工具类）将卡片内按钮统一固定在底部并垂直对齐，解决因内容高度不一致导致的按钮错位问题。
本文介绍如何使用 flexbox（结合 bootstrap 工具类）将卡片内按钮统一固定在底部并垂直对齐，解决因内容高度不一致导致的按钮错位问题。
在构建响应式服务卡片（如 v-for 渲染的多卡片布局）时，即使设置了 min-height，由于标题和描述文本长度不同，.card-body 内容高度仍会变化，导致底部按钮位置浮动——这正是你截图中呈现的问题。
核心解决方案是：将 .card-body 变为垂直方向的 Flex 容器，并利用 margin-top: auto 将按钮“推”至底部。Bootstrap 提供了简洁的工具类来实现这一效果，无需额外 CSS。
✅ 正确做法如下：
- 为 .card-body 添加 d-flex flex-column，使其成为纵向弹性容器；
- 为按钮添加 mt-auto（等价于 margin-top: auto），自动占据剩余空间，迫使按钮锚定在底部；
- 添加 align-self-end 或 w-100 配合 text-center 等，控制按钮水平对齐方式（示例中使用 align-self-end w-100 实现居底+铺满宽度）；
- 移除按钮上原有的 d-flex justify-content-center ——它与父容器的 flex 布局冲突，且无法在非 flex 父级中生效。
优化后的关键代码片段（Vue + Bootstrap 5）：
<div class="col" v-for="o in services" :key="o.id">
<div class="card d-flex" style="width: 25rem; min-height: 38rem;">
<img :src="o.foto" class="card-img-top" style="max-width:90%" alt="Service image"><div class="card-body d-flex flex-column">
<h5 class="card-title fs-3">{{ o.nombre }}</h5>
<p class="card-text fs-6">{{ o.descripcion }}</p>
<a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
</div>
</div>
</div>
⚠️ 注意事项：
- 确保已正确引入 Bootstrap 5 的 CSS 和 JS（尤其是 bootstrap.bundle.min.js，含 Popper 支持）；
- mt-auto 仅在 flex 容器中生效，因此 card-body 必须有 d-flex flex-column；
- 若需按钮居中而非靠右，请将 align-self-end 替换为 align-self-center，或直接移除该类并配合 text-center 在 .card-body 上；
- 避免对 .card 或 .card-body 设置 height: 100% 等可能破坏 flex 行为的样式；
- 在 Vue 中，确保 services 数据结构稳定，避免因响应式更新引发布局闪烁。
通过以上调整，所有卡片的「IR」按钮将严格对齐在视觉底部同一水平线上，无论上方文本长短，真正实现专业、一致的 UI 布局。
