HTML/CSS卡片按钮垂直对齐问题求助

我尝试对齐卡片上的按钮，已设置卡片最小高度以确保其尺寸不受内容影响，但按钮仍未垂直对齐（截图显示不同卡片的按钮位置不一致），相关代码如下：

<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-height: 15rem;" alt="...">
        <div class="card-body">
            <h5 class="card-title fs-3">{{o.nombre}}</h5>
            <p class="card-text fs-6">{{o.descripcion}}</p>
            <a href="#" class="btn btn-primary d-flex justify-content-center mt-3">IR</a>
        </div>
    </div>
</div>

解决方法 #

问题出在card-body未设置弹性布局来分配内部空间，只需做两处修改：

• 给card-body添加d-flex flex-column类，使其成为垂直方向的弹性容器
• 把按钮的mt-3替换为mt-auto，利用自动margin将按钮推到容器底部

修改后的代码：

<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-height: 15rem;" 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 d-flex justify-content-center mt-auto">IR</a>
        </div>
    </div>
</div>

原理说明：

• d-flex flex-column让card-body内的元素按垂直方向排列，剩余空间会被自动分配
• mt-auto会占据按钮上方所有剩余空间，强制按钮固定在card-body的底部，从而实现不同卡片间的按钮垂直对齐

内容的提问来源于stack exchange，提问作者Danger D