twitter-bootstrap Bootstrap 3 列在一行中相同的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22324542/
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
Bootstrap 3 columns in one row same height
提问by Kai Henzler
I'm building a Webapp with AngularJS and Bootstrap 3 and SASS. I want all columns in a row to have the same height. A Bootplyis supplied.
我正在使用 AngularJS 和 Bootstrap 3 以及 SASS 构建一个 Web 应用程序。我希望一行中的所有列都具有相同的高度。提供了一个 Bootply。
The problem is that I don't know the size of the subset in the items array since it comes from the server and the size of the subset effects the height of the column. Therefore I don't want to use a fixed height for all columns. The solution should also work for multiple screen-sizes (col-xs to col-lg) I feel like this can be handled purely with CSS rather than with JavaScript hacking.
问题是我不知道 items 数组中子集的大小，因为它来自服务器，并且子集的大小会影响列的高度。因此我不想为所有列使用固定高度。该解决方案也应该适用于多种屏幕尺寸（col-xs 到 col-lg）我觉得这可以完全用 CSS 而不是 JavaScript hacking 来处理。
I ng-repeat over a list that looks like this:
我重复了一个看起来像这样的列表：
Javascript:
Javascript：
$scope.items = [{
name: 'one',
subset: [{name: 'one-one'}, {name: 'one-two'},{name: 'one-three'}]
}, {
name: 'two',
subset: [{name: 'two-one'}, {name: 'two-two'}]
}];
HTML:
HTML：
<div class="row">
<div ng-repeat="item in items">
<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="menu-item">
<div class="menu-item-header">
<span>{{item.name}}</span>
</div>
<div ng-repeat="subitem in item.subset">
<span>{{subitem.name}}</span>
</div>
<button class="btn btn-default">Do Something</button>
</div>
</div>
</div>
</div>
CSS:
CSS：
.menu-item {
border: 1px solid black;
border-radius: 10px;
padding: 5px;
}
.menu-item-header {
font-weight: bold;
text-align: center;
margin-bottom: 5px;
}
回答by Mister Epic
Flexboxcould do this, but that's not well supported.
Flexbox可以做到这一点，但这并没有得到很好的支持。
Your best bet is to fake it. Instead of worrying about getting the columns the same height, work with the element that is containing all the columns. By default, it will expand to accommodate the child with the greatest height.
你最好的办法是伪造它。不用担心让列具有相同的高度，而是使用包含所有列的元素。默认情况下，它会扩展以容纳身高最大的孩子。
Then, apply a sneaky background image that gives the illusion of borders or background colours:
然后，应用一个偷偷摸摸的背景图像，给人一种边框或背景颜色的错觉：
.row{
background: url(sneaky.png) repeat-y;
}
This trick has been around for a while: http://alistapart.com/article/fauxcolumns
这个技巧已经存在一段时间了：http: //alistapart.com/article/fauxcolumns
UPDATE WITH FLEXBOX
使用 FLEXBOX 更新
Using Flexbox for equal height columns is trivial. Apply flexbox to the parent:
对等高列使用 Flexbox 是微不足道的。将 flexbox 应用到父级：
<div class="row" style="display:flex;">
And.... you're done. All children will have the same height I added a class called colto each column divwith a background colour and a margin so you can tell they are all equal height.
而且……你完成了。所有孩子都将具有相同的高度我添加了一个类，称为col每个列div，带有背景颜色和边距，因此您可以判断它们的高度相同。
回答by dandaka
I have found this solution, you can check demo here —
我找到了这个解决方案，你可以在这里查看演示——
http://getbootstrap.com.vn/examples/equal-height-columns/
http://getbootstrap.com.vn/examples/equal-height-columns/
It uses addon class for your .row, and items in that row gets equal height. Works in IE 10+, which is ok for me now.
它为您的 .row 使用插件类，并且该行中的项目具有相同的高度。适用于 IE 10+，现在对我来说没问题。
/*
* Row with equal height columns
* --------------------------------------------------
*/
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
/*
* Styles copied from the Grid example to make grid rows & columns visible.
*/
.container {
padding-right: 15px;
padding-left: 15px;
}
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
/*
* Callout styles copied from Bootstrap's main docs.
*/
/* Common styles for all types */
.bs-callout {
padding: 20px;
margin: 20px 0;
border-left: 3px solid #eee;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom: 5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout code {
background-color: #fff;
border-radius: 3px;
}
/* Variations */
.bs-callout-danger {
background-color: #fdf7f7;
border-color: #d9534f;
}
.bs-callout-danger h4 {
color: #d9534f;
}
.bs-callout-warning {
background-color: #fcf8f2;
border-color: #f0ad4e;
}
.bs-callout-warning h4 {
color: #f0ad4e;
}
.bs-callout-info {
background-color: #f4f8fa;
border-color: #5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}
