行クラスのすべての要素を同じ高さにする方法はありますか？

Question

ブートストラップでは、行のすべてのスパン要素を同じ高さ、つまり最も高い要素の高さにする簡単な方法はありますか？

ここに私が意味するものの例があります。

http://jsfiddle.net/DVnZ6/

Answer 1

あなたはjQueryのを使用してそれを行うことができます。

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

をここに例を示しますhttp://jsfiddle.net/DVnZ6/3/

Answer 2

あなたが100％にスパンの高さを設定し、行の高さを設定した場合固定値にすると、すべてコンテナの高さに一致します。

もちろん、予想される列の高さを知る必要がありますが、それはjsフリーソリューションです。

Answer 3

ほとんどの場合、コンテンツの高さは解像度によって異なり、オーバーフローしたテキストのような望ましくないデザイン問題が発生するため、resizeイベントをこのコードに追加する必要があります。

ここjsFiddle http://jsfiddle.net/o4w7tjtz/

ヒントにデモをチェック

jQuery(function() { 

    equalMaxWidth = 500; /* Customize viewport width - for resolutions below this number, the height equalizing will not work */ 
    boxes = jQuery('.well'); 

    boxes.removeAttr('style'); 
    if(jQuery(window).width() > equalMaxWidth){ 
     equalBoxHeights(boxes); 
    }; 

    window.onresize = function() { 
     boxes.removeAttr('style'); 
     console.log(jQuery(window).width()); 
     if(jQuery(window).width() > equalMaxWidth){ 
      equalBoxHeights(boxes); 
     }; 
    }; 
}); 

function equalBoxHeights(boxes) { 
    maxHeight = Math.max.apply(
      Math, boxes.map(function() { 
       return jQuery(this).height(); 
      }).get()); 
    boxes.height(maxHeight); 
} 

同様

をリサイズサポートするコードのより完全なバージョンです：第三の縦枠のサイズを変更してみてください（周り500pwに等しい高さに気づいたが、幅？）

Answer 4

私はこの問題を反応的な方法で解決する簡単な方法があります：

//Make every Tile the same height(depending on the highest in row, no matter whats inside) 

$(document).ready(function() { 
    var boxes = $('.well'); 

    //Set the Height as in the example above on page Load 
    setHeight(); 

    // On viewportchange reset the height of each Element and again use the above example to set the heights 
    $(window).resize(function() { 
     boxes .css('height', 'auto'); 
     setHeight(); 
    }); 

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

});