自举格子图片附

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

我认为你需要有一个容器格。

它是容器或容器流体类。