Bootstrap 4张牌的高度和底数相同 [英] Bootstrap 4 Cards Same Height and Bottom Justified

问题描述

我正在尝试对齐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">较长的标题，其中包含两行</h5>< p class ="text-muted"> Lorem ipsum dolor坐着，奉献自若，sius do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.< div class ="align-self-end-border border-danger">< p class ="text-uppercase mb-0">捐助者:123</p>< p class ="text-uppercase">资助:$ 1,234</p>< a href =#" class ="btn btn-info btn-block">查看详细信息</a></div></div></div></div> 

解决方案

感谢 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">较长的标题，其中包含两行</h5>< p class ="text-muted"> Lorem ipsum dolor坐着，奉献自若，sius do eiusmod tempor indicidunt ut Labore et dolore magna aliqua.< div class ="mt-auto border border-danger">< p class ="text-uppercase mb-0">捐助者:123</p>< p class ="text-uppercase">资助:$ 1,234</p>< a href =#" class ="btn btn-info btn-block">查看详细信息</a></div></div></div></div> 

I'm trying to align Bootstrap 4 cards and using d-flex along with align-self-stretch for the cards themselves. Which is great.

However, I can't figure out how to get the part with the red border to float to the bottom. Any ideas by using Bootstrap 4 utilities only?

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

解决方案

Thanks to inputforcolor for help with the solution below, which keeps the cards the same height AND pushes the part I was looking for to the bottom.

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

这篇关于Bootstrap 4张牌的高度和底数相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！