Bootstrap4:底部垂直对齐按钮

Question

我很难将每张卡片底部的按钮对齐：https://jsfiddle.net/xzgsnk85/

<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
    <div class="card h-100">
        <div class="white-bg rounded text-center p-4 mt-2">
            <div class="partner-logo mb-1">
                <img src="coding.svg" alt="partner logo" class="img-fluid">
                <p class="lead mb-3">J'ai un problème avec mon site web</p>
            </div>
            <a href="#" class="btn primary-solid-btn mt-auto">Sélectionner</a>
        </div>
    </div>
</div>

我使用了mt-auto，但没有效果。

我这里漏掉了什么？

Answer 1

您可以使用flex将按钮与底部对齐。将d-flex、flex-column、justify-content-between和h-100类添加到<div>

<div class="white-bg rounded text-center p-4 mt-2 d-flex flex-column justify-content-between h-100">