我有以下HTML代码:
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
Panel 1 (left)
</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-body">
Panel 2 (center)
</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
Panel 3 (right)
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">
Panel 2-2 (under panel 2)
</div>
</div>
</div>
</div>
最终结果应如下所示:
并且可以工作,但是如果面板3的高度大于面板1或2的高度,我会得到以下信息:
我该如何解决?
通过将面板2-2嵌套在面板2下而不是将其放置在末尾,这就是您应该这样做的方式,这不是您想要的。这是Bootply:http ://bootply.com/102721
码
<div class="row">
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">Panel 1 (left)</div>
</div>
</div>
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-body">Panel 2 (center)</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">Panel 2-2 (under panel 2)</div>
</div>
</div>
</div>
<div class="col-lg-3">
<div class="panel panel-default">
<div class="panel-body">Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>Panel 3 (right)
<br>
</div>
</div>
</div>
</div>
演示版
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句