如何在引导程序中生成以下布局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>