menu - Bootstrap 3 菜单不会在 Ipad 上折叠

Question

我正在使用新更新的 Bootstrap 3 RC1 做一个项目.

新的 Bootstrap 3 可能有新的特性，它们与以前的版本大不相同。
我想出了大部分更改，但我无法解决:

当菜单中有很多项目时，它会在 Ipad 和其他平板电脑中中断，因为它不会像在移动设备上自动折叠那样折叠(这很好)

我想知道如何“强制”ipad 像移动设备一样运行并显示折叠菜单或更好的 - 如果菜单有很多项目并且在某些屏幕上并且更小它会损坏，如何折叠菜单

这是我的实时项目的屏幕截图:

-- 大屏幕菜单 --



-- Ipad 横向菜单 --



-- Ipad 纵向菜单 --



-- 手机菜单 --



我只是想让 ipad 像移动设备一样工作。请注意，就内容而不是菜单而言，肖像确实像移动设备一样。

有什么建议？
谢谢

Answer 1

请阅读:http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/

菜单的折叠是在 less 文件中定义的。 (下载最新版本:https://github.com/twbs/bootstrap)

在 variables.less 你会发现 @grid-float-breakpoint: @screen-tablet;其中@screen-tablet 是 768px。

因此，默认情况下，当屏幕宽度低于 768 像素时，您的菜单将折叠；

ipad 横向的屏幕宽度为 1024 像素，因此菜单不会折叠。 ipad 纵向屏幕宽度为 768 像素，因此菜单不会折叠。

另见 navbar.less:

// Responsive navbar
// --------------------------------------------------

@media screen and (min-width: @grid-float-breakpoint) {

要更改此行为，您必须将 @grid-float-breakpoint b.e 设置为 767 并重新编译您的 css 文件。

注意您还提到:“请注意，就内容而不是菜单而言，肖像确实像移动设备一样。”

您使用“col-lg-”作为网格行的前缀。 “col-lg-”元素将在 992px(ipad 纵向)以下堆叠，并在 992px(ipad 横向)以上变为水平。