Boostrap Col不工作Sm

Question

我正在设置一些社交媒体图标，它的工作很好，除了Facebook的一个并不能很好地处理专栏。

当它是一个小屏幕时，它们都应该有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-12换成col-xs-0。你有一个12列的网格。

我认为这是复制和粘贴的错误。:)

Answer 2

Facebook的成绩是12，因为你给它上了col-xs-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;"

我建议阅读自举网格系统文档