Question

我有一个像这样的简单布局：

<div class="row">
    <div class="col-xs-6">
    </div>
    <div class="col-xs-6">
    </div>
</div>

当然div中有很多内容。但这是基本布局。第一个div有更多的内容，因此更长。我如何让他们平等。我已经倾倒了好几个小时，我无法解决。我在许多线程中都看到了.row-eq-height，但我无法开始工作。 flexbox是bootstrap 4的一部分吗？我只是在3岁，因为4不是我们批准的。

Answer 1

您可以使用JavaScript将第一个div的高度指定给第二个div。

<div class="row" id="d1">
    <div class="col-xs-6" style="background-color:gold">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
    <div class="col-xs-6" style="background-color:red" id="d2">
        But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the ...
    </div>
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>

    $("document").ready(function() {
        $("div#d2").height($("div#d1").height());
    });

</script>

如何使两个Bootstrap cols具有相同的高度？

1 个答案: