CSS 引导断点...需要一些说明'xs sm md lg'

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29836950/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:11:58  来源:igfitidea点击:

bootstrap breakpoints... need some clarification ' xs sm md lg'

csstwitter-bootstraptwitter-bootstrap-3

提问by NoobSter

So.. looking online, I see some recent articles stating that the xs breakpoint is 480px and below.. others.. state 767 and below..

所以..在网上看,我看到一些最近的文章说 xs 断点是 480px 及以下.. 其他.. 状态 767 及以下..

I had the understanding (probably not correct) that xs was for phones (480px and below), .col-sm is for tablets (480 px to 767px) etc..

我的理解(可能不正确)xs 适用于手机(480px 及以下),.col-sm 适用于平板电脑(480 px 到 767px)等。

However, when I apply .hidden-xs -- it seems to hide where I would expect my tablet view... in the 480px to 767 range...

但是,当我应用 .hidden-xs 时——它似乎隐藏了我期望平板电脑视图的位置......在 480px 到 767 范围内......

What am I doing wrong here?

我在这里做错了什么?

The columns snap to stacking at 480px, but the .hidden features and .col-xs do not seem to change at that screen width.

列在 480 像素处对齐堆叠,但 .hidden 功能和 .col-xs 在该屏幕宽度上似乎没有变化。

I'm working with some crazy legacy code, but i'm fairly certain I've upgraded to the latest version of bootstrap.

我正在处理一些疯狂的遗留代码,但我很确定我已经升级到最新版本的引导程序。

回答by moodyjive

The xs breakpoint actually handles screens from 767 pixels and below. The breakpoint widths are as follows:

xs 断点实际上处理 767 像素及以下的屏幕。断点宽度如下:

  • xs= 0-767 pixels
  • sm= 768-991 pixels
  • md= 992-1199 pixels
  • lg= 1200 pixels and up
  • xs= 0-767 像素
  • sm= 768-991 像素
  • md= 992-1199 像素
  • lg= 1200 像素及以上

See http://getbootstrap.com/css/#grid

http://getbootstrap.com/css/#grid

PLEASE NOTE THIS ANSWER IS FOR VERSION 3.0

请注意此答案适用于 3.0 版