Bootstrap 3 导航下拉菜单答案

【问题标题】：Bootstrap 3 nav dropdownBootstrap 3 导航下拉菜单
【发布时间】：2015-09-18 05:42:30
【问题描述】：

我正在使用带有下拉菜单的导航栏 (Bootstrap 3)

我调整了浏览器窗口的大小
我打开菜单
我调整浏览器窗口大小> 767px
我打开下拉菜单（在导航栏内）

问题：下拉菜单中出现滚动条。（见下图）

我的“导航”元素是相对位置。

<nav class="navbar navbar-default clearfix" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="logo" href="#"></a>
    </div>

    <div class="collapse navbar-collapse navbar-main-collapse">
        <ul class="main-menu user hidden-xs">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle btn btn-xs btn-primary" data-toggle="dropdown">
                    <span class="glyphicon glyphicon-user"></span>
                </a>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li><a href="#">Menu item 1</a></li>
                    <li><a href="#">Menu item 2</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Menu item 3</a></li>
                </ul>
            </li>
        </ul>
    </div>

</nav>

有人知道如何解决这个问题吗？

【问题讨论】：

我无法重现您的问题。你能添加一个例子（jsfiddle）吗？

标签： twitter-bootstrap scrollbar twitter-bootstrap-3 navbar

【解决方案1】：

是的.. 这是 Bootstrap 3.0.2 中的一个已知错误 --

(https://github.com/twbs/bootstrap/issues/11243)

一种解决方法是......

.navbar-collapse.in {
    overflow-y: visible;
}

演示：http://bootply.com/96924

【讨论】：

【解决方案2】：

Skelly 的回答有所帮助。谢谢你。但由于我在折叠活动期间看到滚动条，我需要像这样修复它：

.navbar-collapse.in, .navbar-collapse.collapsing {
    overflow-y: visible;
}

Bootstrap 在菜单折叠时应用“折叠”类，然后在折叠完成后应用“in”。我希望这对其他人有帮助。

【讨论】：

【解决方案3】：

我也有这个问题。

看到这个： http://bootply.com/97248

运行它
调整（缩小）浏览器窗口的大小，直到变成移动布局
打开下拉菜单（不要关闭/向后折叠）
调整（放大）浏览器窗口的大小，直到变成桌面布局
你会看到下拉菜单有垂直滚动条

这是因为父级（在我的示例中为#test）仍然是移动布局时的“in”类。

.navbar-collapse.in {
    overflow-y: auto;
}

是错误还是引导设计？有人知道在 bootstrap.js 中哪里可以解决这个问题吗？

编辑：谢谢斯凯利！无法投票/评论。

【讨论】：