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

【问题标题】：Do I need to specify all of the col-xx-xx classes to make a page responsive?我是否需要指定所有 col-xx-xx 类才能使页面响应？
【发布时间】：2017-09-29 10:48:30
【问题描述】：

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 类？

【问题讨论】：

Meaning of numbers in col-md-4 , col-xs-1 , col-lg-2 in bootstrap的可能重复

标签： css twitter-bootstrap

【解决方案1】：

col-6 类的元素将占据屏幕的一半，不管是在移动设备上还是在桌面上：在每个屏幕上。而且Bootstrap提供了自定义断点，所以你可以写col-sm-6这样的类，这个规则只适用于小型设备。查看自定义 Bootstrap 的断点和解析：

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

【讨论】：

【解决方案2】：

答案是肯定的。但是，另外，您可以使用md 或lg 断点，具体取决于您希望如何显示网格。例如，假设您有 3 列，它们足够大，可以在平板电脑（可能是 iPad）和台式机上都可以看到，比如三张照片。但是这样在手机上显示三列就没有意义了，这应该调整一列上的一张照片。所以你会告诉 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>

【讨论】：

【解决方案3】：

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

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

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

要回答您的问题，为什么您应该需要用于更高分辨率层的其余类，例如“col-md-6”或“col-lg-6”.. 你不需要，除非你当然想要在这些分辨率层将列宽更改为不同的宽度。

此外，如果这些分辨率的列宽保持不变，您还可以跳过中间分辨率层的类，例如。如果您需要一列从 768 像素到 1199 像素的 50% 宽度，然后让列消耗 66%，您将使用类 col-sm-6 col-lg-9 跳过中间 col-md-6，因为该值是从小分辨率层进行的。

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

【讨论】：