Boostrap Col不工作Sm

Question

我正在設置一些社交媒體圖標，除了臉書不能很好地處理欄目外，它運作良好。

當它是一個小屏幕，他們都應該有2列，不過Facebook的圖標仍採取12

我的代碼：

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

我的圖標看起來「小」屏幕上的內容：

Answer 1

您必須更改col-xs-0的col-xs-12。你有一個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）與您的需求。

您也可以使用text-center類代替style="text-align:center;"

我建議閱讀Bootstrap Grid System文檔