我是否需要指定所有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列，足以在平板电脑（可能是iPad）和桌面上看到，就像三张照片一样。但是，在手机上显示三列是没有意义的，这应该在一列上调整1张照片。因此，您可以告诉Bootstrap在每张照片上显示网格col-md-4，但col-sm-12。

<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％，或者在引导类的情况下，等于所有col-XX-12类，每个类在其响应层

当自己使用col-sm-6并根据引导网格系统的工作方式时，会发生以下情况：

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

要回答您的问题，为什么您需要用于更高分辨率等级的其他类，例如＆＃39; col-md-6＆＃39;或者＆＃39; col-lg-6＆＃39; ..除非您想要在这些分辨率层将列宽更改为不同的宽度。

此外，如果这些分辨率的列宽保持不变，您也可以跳过中间分辨率层的类，例如。如果你需要一个列从768px到1199px的宽度为50％，然后让列消耗66％，你可以使用类col-sm-6 col-lg-9跳过中间col-md-6，因为值是从小分辨率等级。

作为旁注，我所指的断点来自Bootstrap 3 - 为Bootstrap 4更改了 - 但是，用法保持不变。