Boostrap Col Not Working 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

Facebook因为你给它的col-xs-12课程而占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文档

Answer 2

您必须为col-xs-0更改col-xs-12。你有一个12列的网格。

我认为复制和粘贴是错误的。 ：）