具有相同高度的列的引导卡

Question

我有引导卡，它的内容分为 2 列（因此可以在移动设备上调整）。 我想不通的一件事是如何在不涉及 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>