较低分辨率的引导布局答案

【问题标题】：Bootstrap layout on lower resolution较低分辨率的引导布局
【发布时间】：2016-05-10 08:21:33
【问题描述】：

我有以下代码：

<div class="row">
   <div class="col-sm-2">
      <input style="width:100%" >
   </div>
</div>

还有小提琴： Sample

在我的默认分辨率下：1920x1080 更改列数 (col-sm-2) 将更改文本输入的宽度。但在 1024x768 上，无论 col-sm-xx 设置如何，宽度始终是整列。有人可以解释一下为什么会这样吗？

谢谢

【问题讨论】：

【解决方案1】：

BootStrap 遵循一个简单的规则，即 MOBILE FIRST

这意味着如果您只提供col-xs-??，那么它会获得优先权，并且这里提供的任何数字都将提供给所有以上尺寸的屏幕，除非特别提供。

col-sm-?? 的情况与此类似，因此它不会影响 xs 屏幕，但会影响 md 和 lg 屏幕（如果未单独提供这些屏幕）。

因此，正在发生的只是描述 BootStrap 的属性。

CSS 优先级：xs > sm > md > lg

这就是为什么在编写 CSS 时建议这样做

为更大的屏幕而不是移动屏幕放置媒体查询。

希望它能回答你的问题。

【讨论】：

【解决方案2】：

您正在使用的类，col-sm-2 将占用可用宽度的 1/6 (2/16)直到您的窗口宽度小于 768px wide。有关断点和设备支持的更多详细信息，请点击此处：

【讨论】：

【解决方案3】：

引导网格系统分为 12 列。

12 列代表整个页面。

Bootstrap 网格系统有四个类，具体取决于您的设备大小

请务必注意，每个班级都会扩大规模。例如，要为智能手机和平板电脑使用相同的宽度，您只需要一个 col-xs-xx 类

在您的情况下，col-sm-2 代表屏幕上 12 列中的两列。换句话说，它总是占据屏幕的六分之一。

Bootstrap 的网格系统是响应式的，列会根据屏幕大小重新排列：在大屏幕上，将内容组织成三列可能会更好看，但在小屏幕上，如果内容会更好物品堆叠在一起。

资源

【讨论】：

我的问题是为什么在较低分辨率上更改列设置没有任何区别。
重新阅读我的帖子。班级规模扩大。 col-sm-2 将为平板电脑、台式机和大型台式机提供相同的宽度。
要在 Richard 的答案上添加注释，每个类在不同的宽度（以像素为单位）处都有一个特定的断点。您可以在此处阅读有关网格系统和断点的更多详细信息：scotch.io/tutorials/understanding-the-bootstrap-3-grid-system