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">

Bootstrap4：底部的垂直对齐按钮

1 个答案: