- 首页
- 前端开发
- Bootstrap 3.0 - 在同一行中垂直对齐 3 个面板(自动高度)
Bootstrap 3.0 - 在同一行中垂直对齐 3 个面板(自动高度)
[英] Bootstrap 3.0 - Vertically align 3 panels in the same row (Auto Height)
本文介绍了Bootstrap 3.0 - 在同一行中垂直对齐 3 个面板(自动高度)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
尝试使用一行 3 个面板，其中高度根据内容扩展并且它们都正确对齐.左侧面板中有一个图表，右侧的两个面板将有与左侧图表一起使用的表格.
此工作的示例是此模板:单击此处查看示例
<div class="col-md-8"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">面板标题</h3>
<div class="panel-body">面板内容
<div class="col-md-4"><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">面板标题</h3>
<div class="panel-body">面板内容
<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">面板标题</h3>
<div class="panel-body">面板内容
解决方案
嵌套您的网格列，请参阅:http://getbootstrap.com/css/#grid-nesting
示例:http://bootply.com/79487
html
<div class="row"><div class="col-sm-6"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">图表</h3>
<div class="panel-body"><img src="http://dummyimage.com/600x500/000/fff&text=Graph" class="img-responsive">
<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">面板标题</h3>
<div class="panel-body">面板内容
<div class="col-sm-12"><div class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">面板标题</h3>
<div class="panel-body">面板内容
更新 我忘记了上面示例的自动高度部分，您可以从 https://stackoverflow 使用.com/a/12330800/1596547:
$( window ).load(function() {盒子 = $('.col-sm-6');maxHeight = Math.max.apply(数学，boxes.map(function() {返回 $(this).height();}).得到());box.height(maxHeight);$('.col-sm-12 .panel').height(maxHeight/2-22);//22 = 20(下边距)+ 2 * 1(边框)});
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
<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>
解决方案
Nest your grid columns, see: http://getbootstrap.com/css/#grid-nesting
Example: http://bootply.com/79487
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>
update i forgot the autoheight part for the example above you could use from 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)
});
这篇关于Bootstrap 3.0 - 在同一行中垂直对齐 3 个面板(自动高度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
