自举网格布局中的面板

Question

什么是使用自举布局系统来完成这样的事情的正确方法： 也就是说，我想将面板放置在网格布局中，但也有一个网格面板内的布局方法。

我应该有嵌套网格吗？所有的列都需要在一排内吗？一个面板能够跨越顶层网格中的多行吗？每个面板应该包含它自己的12列网格吗？等..似乎有很多方法来完成这一点，但我想知道最佳实践。

Answer 1

这会给你的网格样式，你需要：（EDITED）

<div class="row"> 
    <div class="col-xs-6"> 
     <!-- START PANEL 1 --> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel Heading</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
      </div> 
     </div> 
     <!-- END PANEL 1 --> 

     <!-- START PANEL 3 --> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel Heading</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-3">Dummy Content</div> 
        <div class="col-xs-3">Dummy Content</div> 
        <div class="col-xs-3">Dummy Content</div> 
        <div class="col-xs-3">Dummy Content</div> 
       </div> 
      </div> 
     </div> 
     <!-- END PANEL 3 --> 
    </div> 
    <div class="col-xs-6"> 
     <!-- START PANEL 2 --> 
     <div class="panel panel-default"> 
      <div class="panel-heading">Panel Heading</div> 
      <div class="panel-body"> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
       <div class="row"> 
        <div class="col-xs-6">Dummy Content</div> 
        <div class="col-xs-6">Dummy Content</div> 
       </div> 
      </div> 
     </div>   
     <!-- END PANEL 2 --> 
    </div> 
</div>