使用twitter bootstrap 2.0 - 如何使列高相等？

Question

引導2.0是否有任何幫助使.span1，.span2 .... .span12等高。我嵌套了這種類型的html

<div class='container'> 
    <div class='row'> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     </div> 
    </div> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     XXXX 
     </div> 
    </div> 
    <div class='span2'> 
     <div class='well'> 
     XXXX 
     XXXX 
     XXXX 
     </div> 
    </div> 
    </div> 
</div> 

如果可能，我希望每個井都能達到相同的高度？

Answer 1

這裏是一個負責任的CSS解決方案的基礎上，加入了大量的填充和一個同樣大的負每個列的邊距，然後將整行放入隱藏了溢出的類中。

.col{ 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    background-color:#ffc; 
} 

.col-wrap{ 
    overflow: hidden; 
} 

你可以看到它在jsFiddle

編輯

工作在回答一個問題，這裏有一個變化，如果你需要高度相等井或圓角等高列：http://jsfiddle.net/panchroma/4Pyhj/

編輯

在回答一個問題，這裏是在引導3，同樣的原理相同的技術，只是更新了Bootstap電網類名：http://jsfiddle.net/panchroma/bj4ys/embedded/result/

Answer 2

嘗試這樣的事情（不是很優雅，雖然）：

$('.well').css({ 
    'height': $('.well').height() 
}); 

的jQuerys如果選擇了多個元素height()方法返回的最高值。

見的jsfiddle： http://jsfiddle.net/4HxVT/

Answer 3

jQuery的高度（）方法返回的「第一元件集合中匹配的元素」的值。 http://jsfiddle.net/4HxVT/中的答案僅適用，因爲該行中的第一個元素也是最高的。

這裏還有一個基於jQuery的解決方案：

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

（通過這樣的回答：https://stackoverflow.com/a/526316/518535）

Answer 4

擴大後已給出答案，我有這樣的使用jquery和underscore剛剛解決。下面的代碼段均衡我井和警報出現在一個給定的行的高度，無論最高的一個出現在那裏：

$('.well, .alert').height(function() { 
    var h = _.max($(this).closest('.row').find('.well, .alert'), function (elem, index, list) { 
     return $(elem).height(); 
    }); 
    return $(h).height(); 
}); 

Answer 5

我解決了這個帶有自定義jQuery的最大插件：

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get()); 
} 

下面內容的盒子是我的內部列元素，內容的容器是一個包含列包裝：

$('.content-box').height(function() { 
    var maxHeight = $(this).closest('.content-container').find('.content-box') 
        .max(function() { 
        return $(this).height(); 
        }); 
    return maxHeight; 
}) 

Answer 6

$.fn.matchHeight = function() { 
    var max = 0; 

    $(this).each(function(i, e) { 
    var height = $(e).height(); 
    max = height > max ? height : max; 
    }); 

    $(this).height(max); 
}; 

$('.match-height').matchHeight(); 

Answer 7

上述解決方案都可以工作，直到您添加好引導按鈕！你如何定位我認爲的按鈕（是的，那是我的問題）。

我結合從How might I force a floating DIV to match the height of another floating DIV?

與jQuery的答案CSS有點該死的我得到了這一點，這與CSS工作雖然按鈕不排隊後，和優良的jQuery

感覺免費修復CSS按鈕陣容位:)

的jQuery：

$.fn.equalHeights = function (px) { 
    $(this).each(function() { 
     var currentTallest = 0; 
     $(this).children().each(function (i) { 
      if ($(this).height() > currentTallest) { 
       currentTallest = $(this).height(); 
      } 
     }); 
     if (!px && Number.prototype.pxToEm) { 
      currentTallest = currentTallest.pxToEm(); //use ems unless px is specified 
     } 
     // for ie6, set height since min-height isn't supported 
     if ($.browser.msie && $.browser.version == 6.0) { 
      $(this).children().css({ 
       'height': currentTallest 
      }); 
     } 
     $(this).children().css({ 
      'min-height': currentTallest + 40 // THIS IS A FRIG - works for jquery but doesn't help CSS only 
     }); 
    }); 
    return this; 
}; 

$(document).ready(function() { 
    var btnstyle = { 
    position : 'absolute', 
    bottom : '5px', 
    left : '10px' 
    }; 
    $('.btn').css(btnstyle); 
    var colstyle = { 
    marginBottom : '0px', 
    paddingBottom : '0px', 
    backgroundColor : '#fbf' 
    }; 
    $('.col').css(colstyle);  
    $('.row-fluid').equalHeights(); 
}); 

CSS

.col { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
    background-color:#ffb; 
    position:relative; 
} 
.col-wrap { 
    overflow: hidden; 
} 

.btn{ 
    margin-left:10px ; 
} 
p:last-child { 
margin-bottom:20px ; 
} 

的jsfiddle - http://jsfiddle.net/brianlmerritt/k8Bkm/

Answer 8

這裏是我的2列（適應這更多的列很簡單，只需添加更多的條件）的解決方案。 在加載事件上運行以獲得所有元素的正確高度。

$(window).on('load', function() { 
    var left = $('.left'); 
    var leftHeight = left.height(); 
    var right = $('.right'); 
    var rightHeight = right.height(); 

    // Width like mobile, the height calculation is not needed 
    if ($(window).width() <= 751) 
    { 
     if (leftHeight > rightHeight) { 
      right.css({ 
       'height': 'auto' 
      }); 
     } 
     else { 
      left.css({ 
       'height': 'auto' 
      }); 
     } 

     return; 
    } 

    if (leftHeight > rightHeight) { 
     right.css({ 
      'height': leftHeight 
     }); 
    } 
    else { 
     left.css({ 
      'height': rightHeight 
     }); 
    } 
}); 

<div class="row"> 
    <div class="span4 left"></div> 
    <div class="span8 right"></div> 
</div>