ブートストラップを使用した2列の高さレイアウト

Question

2つの列レイアウトがあり、左側が1つのイメージ列と右側のコンテンツなどです。画面を回転すると同じ高さですが、高さは同じですがページをリフレッシュします）、両方の列の高さが同じになります。私は回転画面でリフレッシュページなしで高さを等しくしようとしています。

$(function(){ 
    $balancer = function() { 
     $('.main-box').each(function(){ 
      if($('.cola',this).height()>$('.colb',this).height()){ 
       $('.colb',this).height($('.cola',this).height()) 
      } else { 
       $('.cola',this).height($('.colb',this).height()) 
      } 

     }); 
    } 
    $balancer(); 
    $(window).load($balancer()); 
    $(window).resize($balancer()); 
}); 

HTML

<div class="main-box"> 
<div class="cola"></div> 
<div class="colb"></div> 
</div> 

Answer 1

あなたはDeviceOrientation変更イベントにフックすることができます。

window.addEventListener("deviceorientation", function (e) { 
     //DO stuff here. 
}, false); 

水平から垂直に戻って再び戻ったときにトリガするもの。

Answer 2

jqueryセレクタが間違っているようです。

$('.main-box').each.... 

ラッパーではなく内側のdivを選択する必要があります。

$('.main-box > div').each.... 



if($(this).height() > $(this).siblings().height()) { 
     $(this).siblings().height($(this).height()); 
} else { 
     $(this).height($(this).siblings().height()) 
    } 

Answer 3

の可能性のある重複：How can I make Bootstrap columns all the same height?

そして、あなたを助けることができる別のリンクがあります：ウィンドウのサイズを回転させるとhttp://getbootstrap.com.vn/examples/equal-height-columns/