Boostrap Colが動作しないSm

Question

私はいくつかのソーシャルメディアアイコンを設定していますが、Facebookのものが列でうまく動作していないという事実以外はうまくいきます。

それは小さな画面だとき、彼らはすべてしかしFacebookのアイコンがまだ12

私のコード取って、2列を持つ必要があります：私のアイコンは、「小さな」画面上で見て何

<a href="https://www.facebook.com/"><i class="fa fa-facebook-square fa-2x col-xs-12 col-sm-2 col-md-2" style="text-align:center;"></i></a> 

<a href="https://twitter.com/"><i class="fa fa-twitter fa-2x col-xs-0 col-sm-2 col-md-2" style="text-align:center;"></i></a> 

<a href="https://www.instagram.com/"><i class="fa fa-instagram fa-2x col-xs-0 col-sm-2 col-md-2" style="text-align:center;"></i></a> 

<a href="https://www.youtube.com/"><i class="fa fa-youtube-play fa-2x col-xs-0 col-sm-2 col-md-2" style="text-align:center;"></i></a> 

<a href="https://plus.google.com/"><i class="fa fa-google-plus-square fa-2x col-xs-0 col-sm-2 col-md-2" style="text-align:center;"></i></a> 

：

をあなたはCOL-XS-12 COL-XS-0を変更する必要が

Answer 1

。あなたは12列のグリッドを持っています。

私はそれがコピーと貼り付けでエラーだと思います。 :)

Answer 2

あなたがそれに与えたcol-xs-12クラスのため、Facebookは12を取っています。

しかし、私は強く、たとえば、行に列と列に要素をラップし、適切にブートストラップグリッドを使用することをお勧めします。

<div class="row"> 
    <div class="col-md-2"> 
    <!-- You element(s) --> 
    </div> 
    <div class="col-md-2"> 
    <!-- You element(s) --> 
    </div> 
    <!-- and so on ... --> 
</div> 

編集ニーズを持つ列クラス（私の例ではcol-md-2を）。

また、あなたは私がそれだBootstrap Grid Systemドキュメント