使列的高度相同

Question

在同一行中有兩列時，我希望較短的列可以擴展其高度以匹配較高的一列。

 @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'); #small-col { background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row"> <div class="col-xs-8"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor. </div> <div class="col-xs-4" id="small-col"> Aliquam eget fermentum magna, nec congue diam. </div> </div> 

Answer 1

您可以使用一些CSS規則輕松完成此操作

 #small-col { background-color: blue; } .row { display: table; } .row [class*="col-"] { float: none; display: table-cell; vertical-align: top; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row"> <div class="col-md-8"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor. </div> <div class="col-md-4" id="small-col"> Aliquam eget fermentum magna, nec congue diam. </div> </div> 

更新 ：一種響應方式。

您可以使用jQuery代碼來做到這一點。

只需在您要定位的div上放置.same-height 。

然后將此代碼添加到您的JavaScript文件中：

    boxes = $(".same-height");
    maxHeight = Math.max.apply(Math, boxes.map(function () {
        return $(this).height()
    }).get());
    boxes.height(maxHeight);

Answer 2

我通常通過將較短的列的背景色應用到row元素，然后將背景色也應用到較高的列來利用一些技巧 ：

 @import url('//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'); #small-col { background-color: blue; } #big-col { background-color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div class="row" id="small-col"> <div class="col-xs-8" id="big-col"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam orci nisi, elementum non ante vitae, dapibus porta lectus. Aliquam elementum ligula ipsum, nec vestibulum ipsum blandit vehicula. Nulla quis ligula ac eros molestie rutrum a sit amet urna. Curabitur varius, augue sed congue feugiat, odio dolor tincidunt ante, sed ultrices lectus tellus imperdiet diam. Praesent non gravida risus. Ut varius pellentesque sollicitudin. Suspendisse potenti. Cras purus mi, rutrum quis leo ut, consectetur aliquam mi. Vestibulum auctor tellus eu auctor pretium. Donec egestas dapibus porttitor. Aliquam convallis sem augue, id volutpat quam rutrum vel. Fusce nec ultrices nibh, non vehicula nunc. Donec elementum, dolor porta placerat hendrerit, magna ipsum ultrices metus, at fermentum nibh dolor ut augue. Vivamus dapibus fringilla tempor. </div> <div class="col-xs-4"> Aliquam eget fermentum magna, nec congue diam. </div> </div>