將div對准Bootstrap4卡體的底部

Question

我正在使用引導卡。 我有頁眉和頁腳，並且它們工作正常。 在卡體內，我有一個卡標題。 該標題在卡體內可占用1或2行。 同樣在此卡體內，我在div中有一些信息。 我想將此信息div對齊到卡體底部，因為我使用行/列很好地對齊了所有內容，但是當您在頁面中翻閱各個卡時，由於1張卡紙標題為1行，另一張卡紙標題為2行，因此此附加信息不會完全在卡之間對齊並進行底部對齊可以解決這個問題。

因此，基本上，我希望橘紅色的div在其卡片的底部對齊，因為然后在視覺上看它們看起來會在卡片上對齊。

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <style> .box { position: relative; display: inline-block; width: 340px; height: 300px; background-color: #fff; border-radius: 5px; } .box:hover { /*-webkit-transform: scale(1.10, 1.10); transform: scale(1.10, 1.10);*/ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); } </style> <div class="container" style="margin-top: 25px;"> <div class="row"> <div class="col"> <div class="box" style="margin-right: 30px; margin-bottom: 30px;"> <div class="card" style="width: 100%; height: 100%;"> <!-- CARD HEADER --> <div class="card-header" style="margin: 0px;"> Header Stuff </div> <!-- CARD BODY --> <div class="card-body" style="cursor: pointer;"> <div class="row"> <div class="col"> <h6 class="card-title">This is a 1 line title</h6> </div> </div> <!--<div class="d-flex align-items-center">--> <div class="container" style="background-color: orangered"> <div class="row"> <div class="col-4"> Starts On: </div> <div class="col"> 1/1/2019 </div> </div> <div class="row"> <div class="col-4"> Ends On: </div> <div class="col"> 12/31/2019 </div> </div> <div class="row"> <div class="col-4"> #: </div> <div class="col"> 52 </div> </div> </div> <!--</div>--> </div> <!-- CARD FOOTER --> <div class="card-footer"> Footer stuff </div> </div> </div> <div class="box" style="margin-right: 30px; margin-bottom: 30px;"> <div class="card" style="width: 100%; height: 100%;"> <!-- CARD HEADER --> <div class="card-header" style="margin: 0px;"> Header stuff </div> <!-- CARD BODY --> <div class="card-body" style="cursor: pointer;"> <div class="row"> <div class="col"> <h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6> </div> </div> <!--<div class="d-flex align-items-center">--> <div class="container" style="background-color: orangered"> <div class="row"> <div class="col-4"> Starts On: </div> <div class="col"> 1/1/2020 </div> </div> <div class="row"> <div class="col-4"> Ends On: </div> <div class="col"> 12/31/2020 </div> </div> <div class="row"> <div class="col-4"> #: </div> <div class="col"> 10 </div> </div> </div> <!--</div>--> </div> <!-- CARD FOOTER --> <div class="card-footer"> Footer stuff here </div> </div> </div> </div> </div> </div> 

Answer 1

我做了幾件事：

• 附加position:absolute ，與底部的間隙為（24％）。
• container類實現了100％的寬度，這就是為什么盒子現在超出邊界的原因；
• card-body類實現了20px的填充
• 為了獲得准確的樣式，我們從100％的寬度（從Cowntainer）中刪除了20px的寬度

完整的摘要如下：

 .box { position: relative; display: inline-block; width: 340px; height: 300px; background-color: #fff; border-radius: 5px; } .box:hover { /*-webkit-transform: scale(1.10, 1.10); transform: scale(1.10, 1.10);*/ box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); } .orangeRedClass { position: absolute; bottom: 24%; width: calc(100% - 40px) !important; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container" style="margin-top: 25px;"> <div class="row"> <div class="col"> <div class="box" style="margin-right: 30px; margin-bottom: 30px;"> <div class="card" style="width: 100%; height: 100%;"> <!-- CARD HEADER --> <div class="card-header" style="margin: 0px;"> Header Stuff </div> <!-- CARD BODY --> <div class="card-body" style="cursor: pointer;"> <div class="row"> <div class="col"> <h6 class="card-title">This is a 1 line title</h6> </div> </div> <!--<div class="d-flex align-items-center">--> <div class="container orangeRedClass" style="background-color: orangered"> <div class="row"> <div class="col-4"> Starts On: </div> <div class="col"> 1/1/2019 </div> </div> <div class="row"> <div class="col-4"> Ends On: </div> <div class="col"> 12/31/2019 </div> </div> <div class="row"> <div class="col-4"> #: </div> <div class="col"> 52 </div> </div> </div> <!--</div>--> </div> <!-- CARD FOOTER --> <div class="card-footer"> Footer stuff </div> </div> </div> <div class="box" style="margin-right: 30px; margin-bottom: 30px;"> <div class="card" style="width: 100%; height: 100%;"> <!-- CARD HEADER --> <div class="card-header" style="margin: 0px;"> Header stuff </div> <!-- CARD BODY --> <div class="card-body" style="cursor: pointer;"> <div class="row"> <div class="col"> <h6 class="card-title">This is a longer description that will span 2 rows making things not line up right between cards</h6> </div> </div> <!--<div class="d-flex align-items-center">--> <div class="container orangeRedClass" style="background-color: orangered"> <div class="row"> <div class="col-4"> Starts On: </div> <div class="col"> 1/1/2020 </div> </div> <div class="row"> <div class="col-4"> Ends On: </div> <div class="col"> 12/31/2020 </div> </div> <div class="row"> <div class="col-4"> #: </div> <div class="col"> 10 </div> </div> </div> <!--</div>--> </div> <!-- CARD FOOTER --> <div class="card-footer"> Footer stuff here </div> </div> </div> </div> </div> </div>