我应该将所有Bootstrap类用于响应式网站吗？

Question

这可能是一个非常noob的问题，但我想知道我应该使用所有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，例如，不需要放置所有其他{{1} } / lg在那里。

但是，假设您希望元素从768px到991px的宽度为50％，从992px及以上为33.333333％，您可以这样做：

md

仅供参考 - <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> 将在767px及以下开始，这意味着每个元素将跨越100％宽度。

因此可以这样写：

col-xs-12

完全相同的行为将被应用，因为<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> 无论如何都会在767px及以下的范围内达到100％！

Answer 2

这取决于您在页面中需要执行的操作。 不，不需要使用所有col类来使其响应，因为在引导程序中，默认情况下所有最低类都是col-*-12，而下一个类将具有相同的值。

让我们说你有这个：

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

这意味着：

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

因此，在您的示例中，您只能使用col-xs-6

Answer 3

您不需要使用所有引导列类。如果您可以支持所需的设计和用户体验，那么类越少越好。根据需要使用尽可能多的类来获得所需的结果。

例如，我编写了许多只有一个断点的应用程序。 （col-sm-6），这样设计只在桌面和平板电脑设备之间有一个断点。这些更容易调试，如果您有时间预算，可以让您在最受欢迎的设备上投入更多精力。

简短回答：只需使用尽可能多的引导网格类，您需要在您希望支持的每台设备上获得所需的网站布局。