CSS Bootstrap 3.0 - 在同一行中垂直对齐 3 个面板（自动高度）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18664591/
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.0 - Vertically align 3 panels in the same row (Auto Height)
提问by Robert Wojtow
Trying to have a single row of 3 panels where the height expands according to the content and they all align properly. The left panel would have a graph in it, the two on the right would have tables that work with the graph on the left.
Example of this working is this template: Click Here For Example
试图有一行 3 个面板，其中高度根据内容扩展，并且它们都正确对齐。左侧面板中有一个图表，右侧的两个面板将有与左侧图表一起使用的表格。
此工作的示例是此模板： 单击此处查看示例
<div class="row">
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Panel content
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Panel content
</div>
</div>
</div>
</div>
回答by Bass Jobsen
Nest your grid columns, see: http://getbootstrap.com/css/#grid-nesting
嵌套您的网格列，请参阅：http: //getbootstrap.com/css/#grid-nesting
Example: http://bootply.com/79487
html
html
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Graph</h3>
</div>
<div class="panel-body">
<img src="http://dummyimage.com/600x500/000/fff&text=Graph" class="img-responsive">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="col-sm-12">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
updatei forgot the autoheight part for the example above you could use from https://stackoverflow.com/a/12330800/1596547:
更新我忘记了上面示例的自动高度部分，您可以从https://stackoverflow.com/a/12330800/1596547使用：
$( window ).load(function() {
boxes = $('.col-sm-6');
maxHeight = Math.max.apply(
Math, boxes.map(function() {
return $(this).height();
}).get());
boxes.height(maxHeight);
$('.col-sm-12 .panel').height(maxHeight/2-22);//22 = 20 (bottom-margin) + 2 *1 (border)
});
