Bootstrap在480和768px之间会发生什么?

时间:2013-09-19 15:17:36

标签: twitter-bootstrap twitter-bootstrap-3

docs中,媒体查询“最多480px”和“768px及以上”,但这些尺寸之间没有任何内容。

这是怎么回事?这是评论中的错误还是什么?

2 个答案:

答案 0 :(得分:5)

非正式地在480和768之间有一个断点,称为 ms (然后你使用col-ms等),见this discussion

另请参阅my contribution示例,了解 ms hack 的实际效果。

Form without the ms hack

Form WITH ms hack

答案 1 :(得分:1)

Bootstrap是一个“移动优先”框架。这意味着最初的核心样式适用于智能手机设备(最高768px)。

之后,定义了各种分辨率断点,触发了覆盖或补充核心样式的其他样式,以优化各种设备的布局。例如,默认情况下,导航菜单可能会隐藏在移动设备优化的布局中,但如果分辨率达到768像素,则平板电脑优化的样式会启动,并将导航菜单显示为下拉列表。

这可能听起来有点令人困惑,但如果您想为智能手机添加样式,只需将它们添加到样式表而无需媒体查询。如果要覆盖或补充平板电脑的这些样式,请使用@media (min-width: @screen-sm) { ... }媒体查询。桌面和超宽桌面布局也是如此。

应该注意,如果您愿意,可以覆盖这些分辨率断点。

<强>更新

从这个回答:Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

看起来有一些代码用于使用480px断点的“微小”网格系统,但它似乎没有实现。