Bootstrap 3网格系统：在一行中使用列嵌套列

Question

Bootstrap 3网格系统：在一行中使用列嵌套列

4

我有以下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，则会出现这种情况：

我该如何解决问题？

- user3140714

你必须将Panel-2-2放在Panel 2下面，为什么它在最后？ - Ali Gajani

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ali Gajani · Accepted Answer

这是你应该做的方式，将面板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>

示例

图片描述

（注：该内容为HTML格式，已保留原有的HTML标签）