Twitter Bootstrap导航栏菜单滚动

Question

在移动设备上使用 Twitter Bootstrap 3 时，菜单的 nabber 会出现水平和垂直滚动条。

在 2.3 版本中不存在这个问题，我无法找到解决方法来禁用它并让菜单项完全展开而没有任何滚动条。

- DevC

---

你可以发布你的 HTML 吗？ - Carol Skelly

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或类似的内容。

- JulienMelissas

Answer 2

如果您遵守 CSS 3.0 规则，这应该可以解决问题。

 max-height: none;

- Unbreakable

---

可以用 overflow-x: hidden; 来禁止水平滚动，很好用！ - xxjjnn

但是，这样做的副作用是在较小的视口上正确呈现吗？我们是否在优化PC而不考虑这一点？ - ficuscr

Answer 3

为了去除垂直滚动条，可以使用以下CSS代码。我没有水平滚动条。

``` overflow-y: hidden; ```

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

- Kyle S

Answer 4

在Bootstrap 3.3.4中，另一种解决方案是将以下内容添加到您的CSS中：

/* No scrolling for collapsed menu */

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

- Cristi Draghici

Answer 5

我自己也遇到了这个问题...

只需将 .navbar-default 设置为绝对定位。

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

.navbar-default {
    position: absolute;
}

虽然Bootstrap 4刚发布alpha版本，我不了解它，但是这个方法似乎可以适用于Bootstrap 3的导航栏。我的导航栏非常长，现在我可以正确地向下滚动并查看所有导航项。

- Qasim