ブートストラップ・グリッド・レイアウトのパネル

Question

ブートストラップ・レイアウト・システムを使用して次のようなものを実現する正しい方法は何ですか： つまり、パネルをグリッド・レイアウトに配置するだけでなく、グリッドパネル内のコンテンツのレイアウト手法。

ネストされたグリッドが必要ですか？すべての列が行内にある必要がありますか？トップレベルのグリッドで複数の行にまたがるパネルはありますか？各パネルにそれ自身の12列のグリッドが含まれていますか？その他これを達成する方法はたくさんあるようですが、Idはベストプラクティスを知りたいと思っています。

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>