Bootstrap 3导航下拉列表 [英] Bootstrap 3 nav dropdown

问题描述

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

I'm using navbar with a dropdown menu (Bootstrap 3)

1. 我调整浏览器窗口的大小< 767px
2. 我打开菜单
3. 我调整浏览器窗口的大小> 767px
4. 我打开下拉菜单(在导航栏中)

问题:下拉菜单中出现滚动条. (请参见下图)

The issue: A scrollbar appears in the dropdown menu. (see picture below)

我的导航"元素是相对位置.

My "nav" element is relative position.

<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>

有人知道如何解决此问题吗?

Does anyone know how to fix this issue?

推荐答案

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

Yes.. this is a known bug in Bootstrap 3.0.2 --

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

一种解决方法是.

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

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

这篇关于Bootstrap 3导航下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！