1

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

我已经知道这个.row-eq-height类，但是使用它我失去了 Bootstrap 元素的响应性。

我的 HTML 是：

<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列至少与该列一样高#map-container（或更高，因为它有一个边框并且我不希望它削减内容）。

我已经写了几行 Jquery ：

var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
  $('#selection').css('height',map_height);
}

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

我不是 JS/Jquery 方面的专家，我的英语也不是很好，所以我希望你仍然明白我想要做什么。

非常感谢 ！

4

1 回答 1

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();
});
于 2017-08-21T18:09:23.750 回答