Bootstrap 4张卡牌的高度和底端对齐

Question

我正在尝试对齐Bootstrap 4卡，并将child: Scaffold( appBar: AppBar( title: appLogo, ), 和d-flex一起用于卡本身。哪个很棒。

但是，我不知道如何使带有红色边框的零件浮动到底部。仅使用Bootstrap 4 utilities有什么想法吗？

align-self-stretch

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>