Html 在等高的网格中引导嵌套面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21890928/
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 nested panels in grid of equal heights
提问by Niner
I have two rows of nested panels inside of a primary panel. The 1st row has 3 panels of unequal heights. How do I make the 3 panels to be the same height of the highest panel (panel #3 in the jsfiddle link)?
我在主面板内有两排嵌套面板。第一排有 3 个高度不等的面板。如何使 3 个面板与最高面板（jsfiddle 链接中的面板 #3）的高度相同？
Here's the jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/
这是 jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/
I would like panel #1 and panel #2 the same height of panel #3, or whichever the tallest panel would be.
我希望面板 #1 和面板 #2 与面板 #3 的高度相同，或者最高的面板。
Thanks for the help.
谢谢您的帮助。
Here's my markup:
这是我的标记：
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">outer</div>
<div class="row">
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">1</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">111</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">2</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">222</div>
<div class="list-group-item">222</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="panel panel-info">
<div class="panel-heading">3</div>
<div class="panel-body">
<div class="list-group">
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
<div class="list-group-item">333</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<span>lower</span>
</div>
<div class="panel-body">
xyz
</div>
</div>
</div>
</div>
</div>
回答by Fven
Try using map()to process each item and get the size of the tallest panel. Than apply this height to each panel.
尝试使用map()处理每个项目并获取最高面板的大小。然后将此高度应用于每个面板。
JS
JS
var heightTallest = Math.max.apply(null, $(".panel-info").map(function ()
{
return $(this).outerHeight();
}).get());
$('.panel-info').css({ height: heightTallest + 'px' });
回答by Damian Trzepa?a
Updated jsfiddle: http://jsfiddle.net/MgcDU/8915/
更新 jsfiddle：http: //jsfiddle.net/MgcDU/8915/
using jquery apply height to children of .row
使用 jquery 将高度应用于 .row 的孩子
$('.row').each(function(){
var RowHeight = $(this).innerHeight();
$(this).children().css({ height: RowHeight + 'px' });
});
and set .panel height to what size you desire, eg. 100%
并将 .panel 高度设置为您想要的大小，例如。100%
回答by cvrebert
If you're okay with the browser compatibility limitations, you could try this CSS flexbox-based experimental code: https://github.com/twbs/bootstrap/pull/11851
如果你对浏览器的兼容性限制没问题，你可以试试这个基于 CSS flexbox 的实验代码：https: //github.com/twbs/bootstrap/pull/11851
