Bootstrap - 将按钮与卡片底部对齐

Question

我正在查看使用 card-deck 和 card 类的 Bootstrap 示例之一（ 定价示例）。我想知道如果其中一个列表的项目比其他列表少，如何修复按钮对齐。

我希望所有按钮都垂直对齐（在每张卡片的底部），但我想不出这样做的方法。我尝试设置 .align-bottom 类以及将按钮包装在 <div class="align-text-bottom"> 中。我还从 这个问题中尝试了几个关于添加空间 的建议，但仍然没有成功（间距也应该是可变的，以便它填满列表中的剩余空间）。

包装在 <div class="card-footer bg-white"> 中也没有产生预期的结果，因为它没有对齐卡片底部的按钮，并且在它周围创建了某种边框。

有人有想法吗？

编辑： 这是一个类似于问题的 jsfiddle 。

原文由 a_guest 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用以下 Bootstrap 4 修饰符类：

1. 将 d-flex 添加到 .card-body
2. 添加 flex-column 到 .card-body
3. 添加 mt-auto 到 .btn 嵌套在 .card-body

小提琴

有关 Bootstrap 4 的 flexbox 修改类的完整列表，请参阅 此页面。

原文由 sol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

样本是（d-flex flex-column）

 <div class="col-md-6 col-lg-6 col-sm-6 col-xl-4" style="float:right">

            <div class="bg-white d-flex flex-column" style="width:100%;height:530px;border:1px solid #808080;border-radius:10px;padding:15px;float:right;margin:10px;">
                <div class="card-body">
                    <h5 class="card-title" style="padding:0px 0px 20px 0px;text-align:center;border-bottom:1px dashed #000000">@item.SiteName</h5>
                    <button type="button" class="btn btn-primary" style="margin:10px;width:94%">آدرس سایت : @item.SiteUrl</button>
                    <button type="button" class="btn btn-secondary" style="margin:10px;width:94%">رتبه الکسا : @item.SiteAlexa</button>
                    <button type="button" class="btn btn-success" style="margin:10px;width:94%">اتوریتی : @item.MozAutoraty</button>
                    <button type="button" class="btn btn-danger" style="margin:10px;width:94%">لینک : @item.LinkToYou</button>
                    <button type="button" class="btn btn-warning" style="margin:10px;width:94%">اسپم اسکور : @item.SpamScore</button>
                    <button type="button" class="btn btn-info" style="margin:10px;width:94%">قیمت : @item.Price</button>
                </div>
                <a href="/Home/About/@item.SiteId" class="btn btn-primary btn-lg btn-block">توضیحات رسانه</a>
            </div>
        </div>

原文由 M.S.B محمد سجاد باهنر 发布，翻译遵循 CC BY-SA 4.0 许可协议