私はブートストラップグリッドをどのように解決できますか？

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

ブートストラップはパターンに従う必要があります。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-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-*を使用して右に移動列をオフセット：

<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> 

uは、このアプローチを試してみてくださいcol-offsetを使用したい場合。これらのクラスは、列の左余白を*列だけ増加させます。この例では、.col-xs-offset-2は列を2列に移動します。