使用Bootstrap和Jquery的相等高度列

Question

我在当前的Web项目中使用Bootstrap，但我不知道如何动态设置相同的列元素高度。

我已经知道have a look at this pull request但是使用它我失去了Bootstrap元素的响应度。

我的HTML是：

api.register()

我希望<div class="row" id="selection-wrapper"> <div class="col-lg-7 col-xs-12" id="map-container"> <!-- Zone for map display --> <div id="map"></div> </div> <div class="col-lg-5 col-xs-12"> <div class="text-container" id="selection"> // Content </div> </div> </div列至少与#selection一样高（或更高，因为它有边框，我不希望它削减内容）。

我已经写了几行Jquery：

#map-container

这些行有效，但我不知道我应该如何以及何时执行它们，因为我希望始终保持相等的高度属性，即使容器的宽度发生变化（这会修改{{的高度） 1}}）。

我不是JS / Jquery的专家，我的英语不是很好，所以我希望你仍然明白我想做的事。

非常感谢！

Answer 1

function equal_height() {
    var map_height = $('#map-container').height();
    var selection_height = $('#selection').height();
    if (selection_height < map_height) {
        $('#selection').css('min-height',map_height);
    }
}
$(document).ready(function(){
    equal_height();
});
$(window).resize(function(){
    equal_height();
});