css - 较低分辨率的 Bootstrap 布局

Question

我有以下代码:

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

还有 fiddle : Sample

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

谢谢

Answer 1

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

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

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

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

CSS priority: xs > sm > md > lg

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

Put media query for larger screens not for mobile screen.

希望它能回答您的问题。