2013-10-04 9 views
11

ショートバージョン:col-x-offset-nは左にのみ適用されますか、これが12にする必要がある場合は左右に適用されますか?たとえば、「col-x-10 col-x-offset-1」を実行して、10列のコンテナに1つの余分な列を左右両方に取得できますか?それはうまくいくようですが、これはドキュメントが示唆していることではありません。bootstrap3列が12未満になると間違っていますか? (または、understanding -offset)

例:私は、ブートストラップ3グリッドシステムを使用してdivを中央に配置しようとしています。 col-xsサイズでは全幅にしたいが、それを上回るように両サイドにもう少しパッディングをしたい。もちろん、すべてのドキュメントは、列の数は、私がもしそうなら12を合計する必要があることを言う:私は2つの空のCOL-SM-1列は左右のパディングのような演技で期待どおり

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-1"> 
     </div> 
     <div class="col-sm-10"> 
      ...content here... 
     </div> 
     <div class="col-sm-1"> 
     </div> 
    </div> 
</div> 

それが動作します。ブートストラップドキュメントが言うように

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1"> 
     ...content here... 
     </div> 
     <div class="col-sm-1"> 
     </div> 
    </div> 
</div> 

を:「.COL-MD-offset- *クラスを使用して右に列を移動するこれらのクラスは、マージンを残し増やす。しかし、私は-offset使用して以下のマークアップでそれを行うことができます*列単位の列の "。したがってこの場合、私は10の列とオフセットに1列加えて、次の空のcol-sm-1 divの1列を12列にします。

最終的には、最後の空のcol-sm-1 divを削除しても、前の例と同じようにページが中央になりますが、現在の列は11になります。

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1"> 
     ...content here... 
     </div> 
    </div> 
</div> 

これは問題ありませんか?ブートストラップは私にとって最後の列を埋めるだけですか?私はちょうどそれを落として、 "col-sm-10 col-sm-offset-1"または "col-sm-8 col-sm-offset-2"または "col-sm-6 col-sm- offset-3 "(これらはそれぞれ11,10、および9の合計の列にそれぞれ加算されますが)、これは実際にそれを行う方法ですか、それとも大丈夫ですか?ほとんどの場合、ブートストラップのようにオフセットが適用されますが、必要ならばのようになりますが、それを確認するためのドキュメントは見つかりません。

(これは私がここで説明していることを簡単にする方法がありますが、オフセットの仕組みを理解しようとしています。 。彼らはこれが許容されるべきである12

まで追加していない例を提供し、ブートストラップドキュメントでそのような)

答えて

11

:参考

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-10 col-sm-offset-1"> 
     ...content here... 
     </div> 
    </div> 
</div> 

「相殺列」の章に進みますhttp://getbootstrap.com/css/#grid最後のe xampleは最大9を加算し、同様の中心的な例です。

<div class="row"> 
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
</div> 
関連する問題