我如何解決我的引導網格？

Question

我在引導和css新的，我要設計這個輸出：

爲此寫：

<div class="row"> 
     <div class="col-md-12 col-md-1 col-md-4 col-md-8" style="background-color: yellow; width: 100%; height: 100%; position: fixed;"> 
      <nav class="navbar navbar-default navbar-left"> 
       <div class="container"> 
        behzad 
       </div> 
      </nav> 
      <div class="col-md-1"> 

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

但是，這是不正確的，我怎麼能解決？

Answer 1

您沒有正確使用引導程序。將您的col定義放在單獨的div的範圍內：還可以使用引導程序的xs和md的定義。最後，把你的row放在一個容器中。

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-3"></div> 
    <div class="col-sm-9"> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
     <div class="col-xs-1"></div> 
    </div> 
    </div> 
</div> 

工作例如：https://jsfiddle.net/mspinks/zf0q5cLk/3/

Answer 2

Bootstrap應遵循以下模式：container - row - col。然後使用-xs（xsmall設備），-sm（小設備），-md（中設備），-lg（大設備）根據設備更改網格設計。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
      <!-- Left panel, top panel on mobile device --> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9"> 
      <!-- Content --> 
      <div class="row"> 
       <div class="col-xs-1"> 
        <!-- First empty col (Also can use offset) --> 
       </div> 
       <div class="col-xs-1"> 

       </div> 
       <div class="col-xs-1"> 

       </div> 
        . 
        . 
        . 
       <div class="col-xs-1"> 
        <!-- Last empty col (Also can use offset) --> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

如果妳想要使用col-offset試試這個方法：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3"> 
      <!-- Left panel, top panel on mobile device --> 
     </div> 
     <div class="col-xs-8 col-lg-offset-2"> 
      <!-- Content --> 
      <div class="row"> 
       <div class="col-xs-1"> 

       </div> 
       <div class="col-xs-1"> 

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

偏移移動列使用.col-xs(sm, md, lg)-offset-*的權利。這些類通過*列增加列的左邊距。在此示例中，.col-xs-offset-2將列移動兩列。