Question

我有引导卡，其内容分为两列（因此可以在移动设备上进行调整）。我不知道的一件事是如何在不涉及jquery设置其高度的情况下使title / 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

在卡片旁边的第一个格中输入“ h-100”，请确保每个卡片中都包含此类。

Answer 2

我们可以通过在jQuery中使用Listening for transport dt_socket at address: 5005函数来实现这一目标。

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

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

2 个答案: