等于列中 Bootstrap 4 卡的高度
如上所述,Bootstrap 4 框架已经在列上实现了 Flexbox,这确保了它们最初的高度相同。要在这些列中实现相同的卡片高度,请考虑在卡片上使用 h-100 类。此类将高度设置为 100%,使卡片能够完全占据每列内的可用空间。
以下是如何使用 h-100 实现此功能的示例:
<code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> ... </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> ... </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> ... </div> </div> </div> </div></code>
此修改可确保每列中的卡片具有相同的高度,无论其内容如何。需要注意的是,之前包含卡片的 .card-deck 类不再需要。
以上是如何实现Bootstrap 4列中卡片的等高?的详细内容。更多信息请关注PHP中文网其他相关文章!