bootstrap 4卡-具有可变标题行的垂直对齐正文 [英] bootstrap 4 cards - vertical alignment body with variable header line rows
问题描述
在我的简单设计中,我使用卡片展示一些产品。但是,某些产品标题包含2行,而其他产品仅包含1行。
In my simple design I use cards to show some products. However some product titles wrap 2 lines while others wrap only 1 line.
我想使正文文本垂直对齐(以及价格按钮也是如此)。.
I would like to have the body text vertically aligned (and the price buttons too)..
<div class="container">
<div class="row">
<div class="col-12">
<div class="card-group">
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/4/7/9/9200000037279741.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-danger">€ 279,-</a>
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/2/4/2/4/9200000076564242.jpg" height="200px" width="25%" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">MSI Gaming GS Rugzak</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-danger">€ 151,-</a>
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/3/2/4/9/9200000088829423.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">DJI Mavic Air Onyx Zwart - Drone</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-danger">€ 753,91</a>
</div>
</div>
<div class="card text-center" >
<img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/7/0/9/9200000063589071.jpg" height="200px" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">BenQ TH683 - Full HD Beamer</h5>
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-danger">€ 589,-</a>
</div>
</div>
</div>
</div>
</div>
</div>
工作代码段可以在以下位置找到: https://www.codeply.com/go/zzm764UnFU
working code snippet can be found here: https://www.codeply.com/go/zzm764UnFU
edit 添加的代码也可以内联
edit added code also inline
推荐答案
正如@Paulie_D所述,实际上没有简单的方法可以对齐卡片中的项目,因为物品具有不同的父卡。
As @Paulie_D mentioned there's really no simple way to align the items within the cards since those items have different parent cards.
您能做的最好的事情就是将按钮和说明推到底部(使用 mt-auto
),以便按钮与底部对齐...
The best you can do is push the buttons and descriptions to the bottom (using mt-auto
) so that the buttons align to the bottom...
<div class="card text-center">
<img class="card-img-top mx-auto d-block" style="max-width: 100%;">
<div class="card-body d-flex flex-column align-items-center">
<h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
<p class="mt-auto">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="mt-auto btn btn-danger">€ 279,-</a>
</div>
</div>
https://www.codeply.com/go/vQPUwL7GLY
这篇关于bootstrap 4卡-具有可变标题行的垂直对齐正文的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!