本文介绍使用 flexbox（结合 bootstrap 实用类）将多张高度一致的卡片中底部按钮强制对齐到相同垂直位置，解决因标题/描述长度不同导致按钮错位的问题。
本文介绍使用 flexbox（结合 bootstrap 实用类）将多张高度一致的卡片中底部按钮强制对齐到相同垂直位置，解决因标题/描述长度不同导致按钮错位的问题。
在响应式卡片布局中，即使设置了 min-height 保证卡片整体高度一致，按钮仍可能因上层内容（如标题、描述）行数不同而浮动在不同高度——这是典型的“内容驱动布局”导致的视觉错位。根本解法是让 .card-body 成为一个垂直方向的 Flex 容器，并通过 margin-top: auto 将按钮“推”至底部。
关键改造有三步：
- 启用卡片主体的 Flex 布局：为 .card-body 添加 d-flex flex-column，使其成为纵向弹性容器；
- 自动撑开中间区域：给按钮添加 mt-auto（等价于 margin-top: auto），利用 Flex 的自动外边距特性将按钮吸附到底部；
- 增强按钮一致性：添加 w-100 使按钮宽度占满父容器，align-self-end 可选（若需右对齐），但通常 w-100 + mt-auto 已足够实现居中底对齐。
✅ 正确代码示例（精简版，适配 Vue 循环）：
<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="服务图片"><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 w-100">IR</a>
</div>
</div>
</div>
⚠️ 注意事项：
- 确保 min-height 设置在 .card（而非 .card-body）上，否则 Flex 布局无法基于固定高度分配空间；
- 避免对按钮额外设置 margin-top 或 position: absolute，会破坏 Flex 自动对齐逻辑；
- 若卡片内含更多动态内容（如图标、标签），建议统一用 flex-grow-1 包裹正文区域，进一步保障底部留白稳定。
通过这一方案，无论 card-title 是一行还是三行，card-text 是短句还是段落，所有“IR”按钮都将严格对齐在同一水平线上，大幅提升卡片网格的专业性与可读性。
