ブートストラップグリッドシステムのコードを減らすには？

Question

私はブートストラップでいくつかのコードを書いており、よく"container-fluid col-lg-3 col-md-3 col-s-3 col-xs-3"または"container-fluid col-lg-6 col-md-6 col-s-6 col-xs-6"を使用します。私はコードを書くのを減らし、これらの行を何度も書き込まない方法があるのだろうかと思っていました。

おかげ

Answer 1

col-lg-3 col-md-3 col-s-3 col-xs-3は、彼らがモバイルアップから作業することにあるグリッドクラスを考えることだけcol-xs-3

最善の方法を使用するのと実際には同じです。つまり、デフォルトでは、使用したグリッドクラスブレークポイントに達するまで、グリッドはモバイルからスタックされます。

たとえば、.col-lg-4を使用すると、モバイル、タブレット、および小型のデスクトップ画面にグリッドが積み重なっていることを意味します。大きなデスクトップブレークポイントに達するまで、グリッドは水平になります。

サイドノート：

col-s-3はcol-sm-3でなければなりません。

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xx-x"> 
      Column 
     </div> 
     <div class="col-xx-x"> 
      Column 
     </div> 
    </div> 
    <div class="row"> 
     ... 
    </div> 
</div> 

Answer 2

幅つもり3 colunmsもされている場合ので、多くのクラスのための必要はありません。

container-fluidのようなものであるべきコンテナクラスであり、列クラスに

一般的な構造であってはなりませんすべての画面サイズで最小画面col-xs-3から開始すれば十分であり、幅はすべてのブレークポイントで同じになります。もう1つは、コンテナクラスで列クラスを使用しないことです。ブートストラップ構造は、最初にコンテナに続いて行と列になります。