twitter-bootstrap 在引导程序中自动调整最大高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23487338/
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
auto adjust max height in bootstrap
提问by Umar Adil
I am new to bootstrap. I am using three columns with class span4 each to show some highlighted content. The boxes are with background color and a solid border. How do I set the height of all the three columns to the max height column among three?
我是引导程序的新手。我使用了三列，每列都带有类 span4 来显示一些突出显示的内容。这些框具有背景颜色和实心边框。如何将所有三列的高度设置为三列中的最大高度列？
<div class="row grid-row">
<div class="span4">
<div class="widget-header">
<h3>Tutoring & Training Centers</h3>
</div>
<div class="widget-body">
<p>World's leading tutoring centers use to create custom diagnostic analysis to improve student performance, increase efficiency, and grow customer base.</p>
<p class="center"></p>
</div>
</div>
<div class="span4">
<div class="widget-header">
<h3>Tutoring & Training Centers</h3>
</div>
<div class="widget-body">
<p>World's leading tutoring centers use to create custom diagnostic analysis to improve student performance.</p>
<p class="center"></p>
</div>
</div>
<div class="span4">
<div class="widget-header">
<h3>Tutoring & Training Centers</h3>
</div>
<div class="widget-body">
<p>World's leading tutoring centers use to create custom diagnostic .</p>
<p class="center"></p>
</div>
</div>
</div>
I have attached a screen short for refrense.
我附上了一个屏幕的缩写以供参考。
回答by cvrebert
There will be an official experimental exampleof same-height columns using CSS flexboxin Bootstrap v3.2.0. Here's the gist of it:
在 Bootstrap v3.2.0中将会有一个使用CSS flexbox的同高列的官方实验示例。这是它的要点：
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
And then use <div class="row row-eq-height">instead of <div class="row">.
然后使用<div class="row row-eq-height">代替<div class="row">。
Note the flexbox isn't supported in IE<10.
请注意 IE<10 不支持 flexbox。
回答by Chankey Pathak
With jQuery
使用 jQuery
var maxHeight = 0;
$("div").each(function(){
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$("div").height(maxHeight);
Also check out: How to create equal height columns in pure CSS
另请查看：如何在纯 CSS 中创建等高列
回答by Amit
This will help you
这会帮助你
Html :
网址：
<div class="main">
<div class="box">a</div>
<div class="box">b</div>
<div class="box" style="height:100px;">c</div>
</div>
Css :
css :
.main{
height:auto;
display:table;
}
.box{
height:100%;
width:80px;
display:table-cell;
background:gray;
border:1px solid red
}
