0

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

<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 不适合我们。

4

1 回答 1

0

您可以使用 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>
于 2018-01-17T17:37:33.920 回答