如何在引導程序中生成以下佈局3 css

Question

我想在引導程序3 css中生成以下佈局，但側欄總是很小，並且不能正確放大，並且移動模式中存在問題我該如何繼續。提前致謝。

注： 這就是我試圖

<div style="display:table;height:100%;width:100vw"> 
     <div style="display:table-row-group;height:100%;width:100vw"> 
       <div class="hidden-xs col-sm-half" style="background:black;height:100vh;"></div> 
       <div class="col-sm-10 col-md-10 col-lg-11half"> 
<div id="prdgrid"> 
     <breadcrumbs path=prd.path ></breadcrumbs> 

    <div class="row" style="width: 100%;height:100%"> 
     <div class="leftcol"> 
      <div class="infotile" style="height: 25%;"> 
       <infotile></infotile> 
      </div> 

     <div class="detail" style="height:31%"> 
      <details></details> 
     </div> 

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

    </div> 

     <div class="rightcol" style="height:100%"> 
     <div class="pricetile hidden-xs"> 
      <pricechart></pricechart> 
     </div> 


      <div class="rightbottomcol" style="height:51%"> 
       <div class="rev"> 
        <div class="title"> 
         <tile></tile> 
        </div> 
       </div> 

       <div class="rev" style="height: 100%;"> 
        <pd></pd> 
       </div> 
     </div> 
    </div> 
    </div> 
</div> 
     </div>   
    </div> 

Answer 1

你必須使用引導網格和麪板的佈局相同，而不是創建自己的CSS佈局。請參考鏈接：https://getbootstrap.com/examples/grid/和http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 2

這是你的代碼應該是什麼樣子：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <div class="col-md-12"></div> 
      <div class="col-md-12"></div> 
     </div> 
     <div class="col-md-8"></div> 
    </div> 
    <div class="row"> 
     <div class="col-md-4"></div> 
     <div class="col-md-2"></div> 
     <div class="col-md-6"></div> 
    </div> 
</div>