Bootstrap 低分辨率布局
Bootstrap layout on lower resolution
我有以下代码：
<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 网格系统分为 12 列。
12 列代表整个页面。
Bootstrap 网格系统有四个 class，具体取决于您的设备大小
- xs：用于智能手机
- sm: 用于平板电脑
- md：用于桌面
- lg：用于较大的桌面
请务必注意，每个 class 都会放大。例如，要为智能手机和平板电脑使用相同的宽度，您只需要 col-xs-xx class
在您的例子中，col-sm-2 代表屏幕上 12 列中的两列。换句话说，它总是占据屏幕的六分之一。
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
资源
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
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.
希望它能回答您的问题。
您正在使用的 class，col-sm-2 将占用可用宽度的 1/6 (2/16) 直到 您的 window 宽度小于 768px wide。有关断点和设备支持的更多详细信息：
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system
我有以下代码：
<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 网格系统分为 12 列。
12 列代表整个页面。
Bootstrap 网格系统有四个 class，具体取决于您的设备大小
- xs：用于智能手机
- sm: 用于平板电脑
- md：用于桌面
- lg：用于较大的桌面
请务必注意，每个 class 都会放大。例如，要为智能手机和平板电脑使用相同的宽度，您只需要 col-xs-xx class
在您的例子中，col-sm-2 代表屏幕上 12 列中的两列。换句话说，它总是占据屏幕的六分之一。
Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
资源
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
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.
希望它能回答您的问题。
您正在使用的 class，col-sm-2 将占用可用宽度的 1/6 (2/16) 直到 您的 window 宽度小于 768px wide。有关断点和设备支持的更多详细信息：
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system