有沒有辦法讓行類中的所有元素具有相同的高度？

Question

在Bootstrap中，是否有一種簡單的方法可以使一行中的所有跨度元素具有相同的高度，即最高元素的高度？

這裏是我的意思的例子。

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 調整以及

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

檢查演示http://jsfiddle.net/o4w7tjtz/

提示：嘗試調整第三縱框架（注意到相等的高度上繞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); 
    } 

});