CSS 使用 twitter bootstrap 2.0 - 如何使列高相等？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9143971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using twitter bootstrap 2.0 - How to make equal column heights?
提问by bradgonesurfing
Does bootstrap 2.0 have any helpers to make .span1, .span2 .... .span12 equal height. I've nested this type of html
bootstrap 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>
I would like each well to end up the same height if possible?
如果可能的话，我希望每口井的高度都相同吗？
回答by David Taiaroa
Here's a responsive CSS solution, based on adding a large padding and an equally large negative margin to each column, then wrapping the entire row in in a class with overflow hidden.
这是一个响应式 CSS 解决方案，基于向每列添加一个大的填充和同样大的负边距，然后将整行包装在一个隐藏溢出的类中。
.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
background-color:#ffc;
}
.col-wrap{
overflow: hidden;
}
You can see it working at jsFiddle
你可以看到它在jsFiddle 上工作
Edit
编辑
In response to a question, here's a variation if you need equal height wells or equal height columns with rounded corners: http://jsfiddle.net/panchroma/4Pyhj/
在回答一个问题时，如果您需要等高井或带圆角的等高列，这里有一个变体：http: //jsfiddle.net/panchroma/4Pyhj/
Edit
编辑
In response to a question, here's the same technique in Bootstrap 3, same principle, just update the class names in the Bootstap grid: http://jsfiddle.net/panchroma/bj4ys/embedded/result/
回答一个问题，这里是Bootstrap 3中相同的技术，相同的原理，只是更新Bootstap网格中的类名：http: //jsfiddle.net/panchroma/bj4ys/embedded/result/
回答by gregory
Try something like this (not very elegant, though):
尝试这样的事情（虽然不是很优雅）：
$('.well').css({
'height': $('.well').height()
});
The jQuerys height()method returns the highest value when multiple elements are selected.
jQuerysheight()方法在选择多个元素时返回最高值。
See the jsFiddle: http://jsfiddle.net/4HxVT/
参见 jsFiddle：http: //jsfiddle.net/4HxVT/
回答by Tim Brayshaw
jQuery's height() method returns the value of the "first element in the set of matched elements". The answer in http://jsfiddle.net/4HxVT/only works because the first element in the row is also the highest.
jQuery 的 height() 方法返回“匹配元素集中第一个元素”的值。http://jsfiddle.net/4HxVT/ 中的答案仅有效，因为行中的第一个元素也是最高的。
Here's another jQuery based solution:
这是另一个基于 jQuery 的解决方案：
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
(Via this answer: https://stackoverflow.com/a/526316/518535)
（通过这个答案：https: //stackoverflow.com/a/526316/518535）
回答by jstewmon
Expanding upon the answers already given, I have just solved this using jqueryand underscore. The snippet below equalizes the height of my wells and alerts that appear on a given row, regardless of where the tallest one appears:
扩展已经给出的答案，我刚刚使用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();
});
回答by galatians
$.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();
回答by Gy?rgy Balássy
I solved this with a custom jQuery max plugin:
我用一个自定义的 jQuery max 插件解决了这个问题：
$.fn.max = function(selector) {
return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get() );
}
Here content-box is my internal column element, content-container is the wrapper that contains the columns:
这里 content-box 是我的内部列元素， content-container 是包含列的包装器：
$('.content-box').height(function () {
var maxHeight = $(this).closest('.content-container').find('.content-box')
.max( function () {
return $(this).height();
});
return maxHeight;
})
回答by brianlmerritt
The above solutions all work until you add nice bootstrap buttons! How do you position buttons I thought (yes, that was my problem).
上述解决方案都有效，直到您添加漂亮的引导程序按钮！我想你如何定位按钮（是的，那是我的问题）。
I combined the CSS with the jquery answer from How might I force a floating DIV to match the height of another floating DIV?
我将 CSS 与来自如何强制浮动 DIV 与另一个浮动 DIV 的高度相匹配的jquery 答案相结合？
After a bit of frigging I got this, which works with CSS although the buttons don't line up, and is fine with jQuery
经过一番苦苦挣扎后，我得到了这个，虽然按钮不对齐，但它适用于 CSS，并且适用于 jQuery
Feel free to fix the CSS button line up bit :)
随意修复 CSS 按钮排列位 :)
jQuery:
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
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/
jsfiddle - http://jsfiddle.net/brianlmerritt/k8Bkm/
回答by HolloW
Here is my solution with 2 columns (adapt this to more columns is simple, just add more conditions). Run on the load event to have the correct heights of all elements.
这是我的 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>
