Twitter Bootstrap 导航栏菜单滚动答案

【问题标题】：Twitter Bootstrap Navbar menu scrollingTwitter Bootstrap 导航栏菜单滚动
【发布时间】：2013-09-04 07:59:47
【问题描述】：

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

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

【问题讨论】：

【解决方案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 或类似的内容。

【讨论】：

【解决方案2】：

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

 max-height: none;

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

我自己也遇到过这个……

绝对定位 .navbar-default。

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

.navbar-default {
    position: absolute;
}

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

【讨论】：

【解决方案5】：

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

/* No scrolling for collapsed menu */

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

【讨论】：