自举3.0 - 垂直对齐3面板同一行中（自动高度）面板、高度
2023-09-11 07:43:06
作者：还没握紧你的手你就放手了
试图为3的面板的单一行，其中的高度膨胀根据内容，它们都正确对齐。左侧面板将具有在它的曲线图，这两个在右侧将具有与在左侧的曲线图的工作表。 这个工作的例子是这样的模板：点击这里有个例子
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-8＆GT;
＆LT; DIV CLASS =面板面板默认＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT; H3类=面板标题＆GT;面板标题＆LT; / H3＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体＆GT;面板内容
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;
＆LT; DIV CLASS =面板面板默认＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT; H3类=面板标题＆GT;面板标题＆LT; / H3＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体＆GT;面板内容
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板面板默认＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT; H3类=面板标题＆GT;面板标题＆LT; / H3＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体＆GT;面板内容
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
解决方案
巢网格列，请参阅： HTTP：// getbootstrap .COM / CSS /＃格嵌套
例： http://bootply.com/79487
HTML
＆LT; DIV CLASS =容器＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-SM-6＆GT;
＆LT; DIV CLASS =面板面板成功＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT; H3类=面板标题＆GT;曲线＆LT; / H3＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体＆GT;
＆LT; IMG SRC =http://dummyimage.com/600x500/000/fff&text=Graph级=IMG响应＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-SM-6＆GT;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-SM-12＆GT;
＆LT; DIV CLASS =面板面板主＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT; H3类=面板标题＆GT;面板标题＆LT; / H3＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体＆GT;
面板内容
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =COL-SM-12＆GT;
＆LT; DIV CLASS =面板面板成功＆GT;
＆LT; DIV CLASS =面板标题＆GT;
＆LT; H3类=面板标题＆GT;面板标题＆LT; / H3＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =面板体＆GT;
面板内容
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
更新我忘了autoheight一部分上面的例子中，你可以使用从http://stackoverflow.com/a/12330800/1596547:
$（窗口）.load（函数（）{
箱= $（'COL-SM-6。'）;
=了maxHeight Math.max.apply（
数学，boxes.map（函数（）{
返回$（这）.height（）;
}）。得到（））;
boxes.height（了maxHeight）;
$（'COL-SM-12 .panel。'）的高度（了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 http://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)
});
相关推荐
猜您喜欢
精彩图集
