我有以下代码:
<div class="row">
<div class="col-sm-2">
<input style="width:100%" >
</div>
</div>
还有 fiddle : Sample
在我的默认分辨率下:1920x1080 更改列数 (col-sm-2) 将更改文本输入的宽度。但是在 1024x768 上,无论 col-sm-xx 设置如何,宽度始终是整列。有人可以解释为什么会这样吗?
谢谢
最佳答案
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.
希望它能回答您的问题。
关于css - 较低分辨率的 Bootstrap 布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35138056/