ブートストラップとJqueryを使用した等しい高さの列

Question

現在のWebプロジェクトではブートストラップを使用していますが、同じ高さの列要素を動的に設定する方法はわかりません。

私はすでに.row-eq-height classを知っていますが、それを使ってブートストラップ要素の応答性を失います。

私のHTMLは次のとおりです。

<div class="row" id="selection-wrapper"> 
 

 
\t <div class="col-lg-7 col-xs-12" id="map-container"> 
 
\t \t <!-- Zone for map display --> 
 
\t \t <div id="map"></div> 
 
\t </div> 
 

 
\t <div class="col-lg-5 col-xs-12"> 
 
\t \t <div class="text-container" id="selection"> 
 
\t \t \t // Content 
 
\t \t </div> 
 
\t </div> 
 
</div

それは国境を持っており、私はそれをしたくないので、私は#map-container（またはそれ以上と少なくとも同じに高いことが#selection列を希望コンテンツをカットする）。

私はすでに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の専門家ではなく、自分の英語は本当にうまくいきませんので、私はあなたが何をしたいのか理解していることを願っています。

ありがとうございます！

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(); 
});