jquery - Twitter Bootstrap 导航栏菜单滚动

Question

使用twitter bootstrap 3时，移动设备上的菜单nabber有水平和垂直滚动条。

它不在那里，2.3我不知道如何禁用它并让菜单项扩展到完整而没有任何滚动条。

Answer 1

这是 Bootstrap 3 的新功能。

最好的方法是删除或注释 /less/navbar.less 中的第 52 和 53 行：https ://github.com/twbs/bootstrap/blob/master/less/navbar.less#L52-53 （您可以选择删除第 59 行）并重新编译 bootstrap.less。

如果您无法使用 CodeKit 或 Grunt 之类的工具重新编译 Bootstrap，您将需要在您的 css 文档中编写一个媒体查询，以挑出并覆盖 .navbar-collapse 类，可能如下所示：

@media (max-width: 767px) {
   .navbar-collapse {
      max-height: auto;
      overflow-x: auto;
   }
}

我实际上还没有测试过上面的代码——因为我能够重新编译。您可能必须包括 !important 或类似的东西。

Answer 2

应该这样做（如果您遵守 CSS 3.0 规则）

 max-height: none;

Answer 3

为了移除垂直滚动条，这部分 CSS 起作用了。我没有水平滚动条。

@media (max-width: 767px) {
   .navbar-collapse {
      max-height: none;
   }
}

Answer 4

我自己也遇到过这个...

只是绝对定位.navbar-default。

.navbar-collapse div 是绝对定位的，您需要将其“附加”到非静态定位的父/祖先元素。所以，我刚刚补充说：

.navbar-default {
    position: absolute;
}

不知道 Bootstrap 4（刚刚发布了 alpha 版本），但这似乎与 Bootstrap 3 导航有关。我有一个非常长的导航，现在我可以正确地向下滚动并查看所有导航项目。

Answer 5

Boostrap 3.3.4 中的另一个解决方案是将以下内容添加到您的 CSS 中：

/* No scrolling for collapsed menu */

.navbar-collapse.in {
    overflow: hidden;
    max-height: none !important;
    height: auto !important;
}