Question

我有以下代码：

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

小提琴： Sample

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

由于

Answer 1

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

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

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

因此，正在发生的事情是它只描绘了BootStrap的属性。

CSS优先级： xs＆gt; sm> md> LG 的

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

将媒体查询放在较大的屏幕上而非移动屏幕。

希望它能回答你的问题。

Answer 2

引导网格系统分为12列。

12列代表整个页面。

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

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

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

Bootstrap的网格系统是响应式的，并且列将根据屏幕大小重新排列：在大屏幕上，内容可能看起来更好，内容分为三列，但在小屏幕上，它将是如果内容项堆叠在一起，则会更好。

资源

Answer 3

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