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

【问题标题】：Bootstrap 4 Cards Same Height and Bottom JustifiedBootstrap 4 卡相同的高度和底部对齐
【发布时间】：2020-02-02 07:09:21
【问题描述】：

我正在尝试对齐 Bootstrap 4 卡，并使用 d-flex 和 align-self-stretch 作为卡本身。太棒了。

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

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

【问题讨论】：

正在处理它 _ 虽然拥有所有三张卡的代码会更容易 _ 你可以添加其余的吗？ #只是说
谢谢！所有 3 张卡的代码都相同，只是 card-title 和 p text-muted 项目的字符长度不同。
好吧，我尝试过似乎没有任何效果_在这个问题中（可能被归类为您的重复问题？）有一个讨论是在父母内部实现垂直对齐需要外部 CSS _查看底部答案 >>> stackoverflow.com/questions/48391500/bootstrap-4-align-bottom
在这里查看另一个答案 >>> stackoverflow.com/questions/48719567/… _ 有一个解决方案和解释为什么 align-self 不能与 card 一起使用
太棒了，第二个问题解决了我的问题。

标签： css bootstrap-4

【解决方案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>

【讨论】：

感谢您的标签； ) 也许您应该在文中提及d-flex 和flex-column，以便您的回答突出您所做的更改_使其对其他人更有用； )
好主意。您想发布更完整的答案吗？我很乐意接受你的回答:)
接受的答案将使我成为 SO 审稿人 _ 但这不是真正的“我的”解决方案，所以我很感谢 _ 很高兴我们找到了你的答案 _ 保重 Dario