Bootstrap 4 卡相同高度和底部对齐

Question

我正在尝试对齐 Bootstrap 4 卡并与卡本身d-flex一起使用。align-self-stretch这太棒了。

但是，我不知道如何让红色边框的部分浮到底部。仅使用 Bootstrap 4实用程序有什么想法吗？

<div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch">
    <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body">
            <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="align-self-end border border-danger">
                <p class="text-uppercase mb-0">Donors: 123</p>
                <p class="text-uppercase">Funded: $1,234</p>
                <a href="#" class="btn btn-info btn-block">View Details</a>
            </div>
        </div>
    </div>
</div>

Answer 1

感谢inputforcolor提供以下解决方案的帮助，该解决方案使卡片保持相同的高度并将我正在寻找的部分推到底部。

<div class="col-sm-12 col-md-6 col-lg-4 d-flex align-self-stretch">
    <div class="card shadow-sm mb-4">
        <img src="https://placehold.it/500x300" class="card-img-top" alt="">
        <div class="card-body d-flex flex-column">
            <h5 class="card-title text-uppercase">Longer title here that wraps two lines</h5>
            <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="mt-auto border border-danger">
                <p class="text-uppercase mb-0">Donors: 123</p>
                <p class="text-uppercase">Funded: $1,234</p>
                <a href="#" class="btn btn-info btn-block">View Details</a>
            </div>
        </div>
    </div>
</div>