我应该为响应式网站使用所有的Bootstrap类吗？

Question

也许这是一个非常菜鸟般的问题，但我想知道是否应该使用所有Bootstrap网格类？

我的意思是说如果我有一个非常好的桌面和移动UI设计，仅使用col-sm-*和col-xs-*类就足够了吗，还是也必须使用col-md-*和col-lg-*类？

我问这个问题，因为我曾经阅读过一些网页源代码，并且经常看到以下内容：

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
  //some content
</div>

但是仅使用sm和xs类还不够吗？

Answer 1

要回答您的问题，是的，您可以使用

<div class="col-xs-6">

而且不论视口如何，此类的每个元素将始终具有50％的宽度。

更多信息：

由于BootStrap是移动设备优先的产品，因此如果您计划将元素保持50％且彼此之间保持768px及以上的像素，则可以使用col-sm-6例如，而无需将所有其他lg/ md放在其中。

但是，假设您希望元素的宽度从768px到991px为50％，从992px起为33.333333％，您可以执行以下操作：

<div class="col-md-4 col-sm-6 col-xs-12">
    // content
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    // content
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
    // content
</div>

仅供参考- col-xs-12将会以767px及以下像素开始播放，这意味着每个元素的宽度将达到100％。

因此，上面的代码可以这样写：

<div class="col-md-4 col-sm-6">
    // content
</div>
<div class="col-md-4 col-sm-6">
    // content
</div>
<div class="col-md-4 col-sm-6">
    // content
</div>

而且将采用完全相同的行为，因为它将以col-sm-6100％的分辨率跨越767px及以下！