ブートストラップグリッドの画像が添付されています

Question

ブートストラップグリッドを扱う際に問題があります。

は私が私がやりたいことを教えてみましょうが、私は、私はそれが絵下記のようになりたいことができなかった、

下の画像を参照してください。 1行目はページの70％を占め、もう1つの行は30％を占めます。

と列 "同じ高さ" 行を埋める、私を理解するために、 "Demo2.jpg" を参照してください=（

注：私はまだ、お手数勉強してい 私のコード。：

<div class="col-md-6"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 

          <div class="panel-heading "> 
           <h6 class="panel-title">PANEL 1 </h6> 
          </div> 
          <div class="panel-body" > 
           <div id="container"></div> 
          </div> 
         </div> 
    </div> 


    <div class="col-md-4"> 
     <div class="row"> 
      <div class="col-md-6 "> 
      <div class="panel border-top-info border-bottom-info" > 
          <div class="panel-heading "> 
           <h6 class="panel-title">PANEL 2 </h6> 
          </div> 


         </div> 
      </div> 
      <div class="col-md-6"> 
      <div class="panel border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 3 </h6> 
          </div> 


         </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-6"> 
      <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 4 </h6> 
          </div> 


         </div> 
      </div> 
      <div class="col-md-6"> 
      <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 5 </h6> 
          </div> 


         </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">PANEL 6 </h6> 
          </div> 


         </div> 
    </div> 
</div> 

<div class="row"> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-4"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
    <div class="col-md-2"> 
    <div class="panel panel-flat border-top-info border-bottom-info"> 
          <div class="panel-heading"> 
           <h6 class="panel-title">Top and bottom borders</h6> 
          </div> 

          <div class="panel-body"> 
           Panel with top and bottom <code>info</code> borders 
          </div> 
         </div> 
    </div> 
</div> 

Answer 1

あなたは動作しません縦サイズ、用COL-MD-ディレクティブを使用している。col-一部はように操作するすべての要素の幅で、列の略です。私はありません任意の指令を意識する帽子はあなたが高さで同じことをすることができます...

Answer 2

私はあなたがコンテナdivを持つ必要があると思います。

これはコンテナまたはコンテナ流体クラスです。