我是否需要指定所有的col-xx-xx类才能使页面响应？

Question

Bootstrap相当新，尝试将现有页面转换为bootstrap标签。

我的问题与网格有关。在这个页面http://blog.codeply.com/2016/04/06/how-the-bootstrap-grid-really-works/上，它说你只需要使用你想要支持的最小设备宽度的类。

因此，如果我想支持移动设备、平板电脑、中屏和大屏，我只需要输入col-sm-xx

如果我将div设置为

<div class="col-sm-6">...</div>

我知道这将占用一半的屏幕大小，但当col-md-xx和col-lg-xx断点命中时，它会做同样的事情吗？

如果是这样的话，为什么还要费心去上md和lg课程呢？

Answer 1

带有col-6类的元素将占据半个屏幕，不管是在移动设备上还是在桌面上:在每个屏幕上。Bootstrap提供了自定义断点，因此您可以编写类似于col-sm-6的类，并且此规则仅适用于小型设备。查看自定义Bootstrap的断点和分辨率：

​

​

创建此选项是为了允许开发人员在每个断点中更改他们的网格。

Answer 2

答案是肯定的。但是，另外，您可以使用md或lg断点，这取决于您希望显示网格的方式。例如，假设你有3 columns，它足够大，可以在平板电脑(可能是iPad)和桌面上看到，就像三张照片一样。但是，在手机上显示三个列是没有意义的，这应该调整一个列上的一张照片。因此，您将告诉Bootstrap在除col-sm-12之外的每张照片上显示一个网格col-md-4。

<div class="row">
 <div class="col-xs-12 col-md-4">photo here</div>
 <div class="col-xs-12 col-md-4">photo here</div>
 <div class="col-xs-12 col-md-4">photo here</div>
</div>

Answer 3

我将根据您的示例回答您的问题；在这样做之前，必须注意的是，默认情况下，div元素的宽度为100%，或者对于bootstrap类，等于所有col-XX-12类，每个类都在其响应层。

当单独使用col-sm-6并基于引导网格系统的工作方式时，会发生以下情况：

a)由于没有col-xs-XX类，列的宽度将默认为正常的div，也就是100%b)从sm分辨率层开始- 768px及以上-列将是父宽度的6/12或50%。c)如果没有更高分辨率层的其他类，则50%的宽度将传递到所有分辨率以上。

为了回答你的问题，为什么你需要用于更高分辨率层的其他类，例如‘or md-6’或‘or lg-6’。您不需要，除非您想在这些分辨率层将列宽更改为不同的宽度。

此外，您还可以跳过中间分辨率层的类，如果这些分辨率的列宽保持不变，例如。如果您要求一个列的宽度为50%，从768px到1199px，然后让该列占用66%，那么可以使用col-sm-6 col-lg-9类来跳过中间的col-md-6，因为这个值是从小分辨率层继承过来的。

作为附注，我所指的断点来自Bootstrap 3-在Bootstrap 4中更改了-然而，用法保持不变。