自舉格子圖片附

Question

我有一些問題處理引導格子。見圖像下方

，

讓我告訴你我想要做的，但我不能，我希望它是像下面的圖片。第1行佔頁面的70％，另一行佔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-指令，這是行不通的。一部分的同事代表列，因此所有的操縱是元素的寬度。我不意識到任何指令t帽子允許你做同樣的高度...

Answer 2

我認爲你需要有一個容器格。

它是容器或容器流體類。