Bootstrap 3 nav dropdown

问题

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

I resize the browser window < 767px
I open the menu
I resize the browser window > 767px
I open the dropdown menu (inside navbar)

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?

回答1:

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

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

One workaround is to..

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

Demo: http://bootply.com/96924

回答2:

Skelly's answer helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:

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

Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.

回答3:

I also have this problem.

see this: http://bootply.com/97248

run it
resize (make it smaller) browser window until it become mobile layout
open dropdown menu (don't close/collapse it back)
resize (make it bigger) browser window until it become desktop layout
you'll see the dropdown menu got vertical scrollbar

it's because the parent (#test in my example) still got 'in' class from when it's still mobile layout.

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

is it bug or by bootstrap design? Anyone know where to fix this in bootstrap.js?

EDIT : thx Skelly! can't upvote/comment.

来源：https://stackoverflow.com/questions/20199308/bootstrap-3-nav-dropdown

标签

twitter-bootstrap

scrollbar

twitter-bootstrap-3

navbar