twitter-bootstrap col-* 的 bootstrap 3 最大和最小分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21920333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 max & min resolutions for col-*
提问by Vivek S
I am quite impressed with the latest version of bootstrap. And I have started to work on it. Now I can understand that the grid system works on 4 column class size variants, with the following definition:
最新版本的引导程序给我留下了深刻的印象。我已经开始努力了。现在我可以理解网格系统适用于 4 个列类大小变体，其定义如下：
col-xs-* ---> mobile
col-sm-* ---> tablet
col-md-* ---> laptops
col-lg-* ---> large monitors
However, I need to know, what is the minimum and maximum resolutions for which these classes gets applied on so that I can design the layout better.
但是，我需要知道应用这些类的最小和最大分辨率是多少，以便我可以更好地设计布局。
I am asking this because, I could see col-md class applied at 800px. I generated this resolution using Firefox's responsive view simulator.
我问这个是因为，我可以看到在 800px 处应用了 col-md 类。我使用 Firefox 的响应式视图模拟器生成了这个分辨率。
回答by Joe C
From the documentation for the grid:
从网格的文档中：
/* Extra small devices (phones, less than 768px) / /No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }
/* 超小设备（手机，小于 768px）//没有媒体查询，因为这是 Bootstrap 的默认设置 */
/* 小型设备（平板电脑，768px 及以上）*/ @media (min-width: @screen-sm-min) { ... }
/* 中型设备（桌面，992px 及以上）*/ @media (min-width: @screen-md-min) { ... }
/* 大型设备（大型桌面，1200px 及以上）*/ @media (min-width: @screen-lg-min) { ... }
It also provides the container widths:
它还提供容器宽度：
- .col-xs-*: none (auto)
- .col-sm-*: 750px
- .col-md-*: 970px
- .col-lg-*: 1170px
- .col-xs-*：无（自动）
- .col-sm-*: 750px
- .col-md-*: 970px
- .col-lg-*: 1170px
回答by moodyjive
col-xs-* = less than 768px
col-xs-* = 小于 768px
col-sm-* = 768px and up
col-sm-* = 768px 及以上
col-md-* = 992px and up
col-md-* = 992px 及以上
col-lg-* = 1200px and up
col-lg-* = 1200px 及以上
回答by Khadka Pushpendra
For detail about Bootstrap 3 you can follow this link Bootstrap 3 Grid options
有关 Bootstrap 3 的详细信息，您可以点击此链接Bootstrap 3 Grid options
- Extra small devices Phones (<768px) (col-xs)
- Small devices Tablets (≥768px) (col-sm)
- Medium devices Desktops (≥992px) (col-md)
- Large devices Desktops (≥1200px) (col-lg)
- 超小设备电话（<768px）（col-xs）
- 小型设备平板电脑 (≥768px) (col-sm)
- 中型设备桌面 (≥992px) (col-md)
- 大型设备桌面（≥1200px）（col-lg）
