列高度相同的引导卡

Question

我有引导卡，它的内容分为两列(所以可以在手机上调整(。有一件事我想不通，那就是如何在不涉及jquery来设置其高度的情况下使标题/h6具有相同的高度。。。有可能用flexbox解决这个问题吗？

这是卡片结构：

<div class="card">
<div class="card-header">Subtitle</div>
<div class="row no-gutters">
<div class="col-8 col-12">
<div class="card-body">
<h6>Some Post Title</h6>
</div>
</div>
<div class="col-4 col-12">
<img src="https://placeimg.com/640/400/animals" class="img-fluid" alt="">
</div>
</div>
<div class="card-footer">posted</div>
</div>

你可以在这里看到更多，任何帮助都意义重大。https://jsfiddle.net/g69phmz7/

Answer 1

在卡片旁边的第一个div中键入"h-100"，确保每个卡片中都有这个类。

Answer 2

我们可以通过在jQuery中使用each函数来实现这一点。

let titleHeight = 0; // declaring height as 0
$('.card-title').each(function () { // using each function for card-title class
if ($(this).height() > titleHeight) { // comparing the heights of each card-title class
titleHeight = $(this).height(); // we are assigning greater height to card-title
}
});
$('.card-title').height(titleHeight); //  here we are assigning greater height to all card-title class

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-4 d-flex align-items-stretch">
<div class="card">
<div class="card-header">Subtitle</div>
<div class="row no-gutters">
<div class="col-8 col-12">
<div class="card-body">
<h6 class="card-title">Some Post Title</h6>
</div>
</div>
<div class="col-4 col-12">
<img src="https://placeimg.com/640/400/animals" class="img-fluid" alt="">
</div>
</div>
<div class="card-footer">posted</div>
</div>
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<div class="card">
<div class="card-header">Subtitle</div>
<div class="row no-gutters">
<div class="col-8 col-12">
<div class="card-body">
<h6 class="card-title">Some Post Title Goes Here And Its Longer</h6>
</div>
</div>
<div class="col-4 col-12">
<img src="https://placeimg.com/640/400/animals" class="img-fluid" alt="">
</div>
</div>
<div class="card-footer">posted</div>
</div>
</div>
<div class="col-lg-4 d-flex align-items-stretch">
<div class="card">
<div class="card-header">Subtitle</div>
<div class="row no-gutters">
<div class="col-8 col-12">
<div class="card-body">
<h6 class="card-title">Some Post Title</h6>
</div>
</div>
<div class="col-4 col-12">
<img src="https://placeimg.com/640/400/animals" class="img-fluid" alt="">
</div>
</div>
<div class="card-footer">posted</div>
</div>
</div>
</div>
</div>
</div>
</div>