简单的 twitter bootstrap 导航栏下拉菜单不显示下拉菜单，而是扩展导航栏的高度

Question

我创建了以下 JSFiddle 来复制我的问题：http://jsfiddle.net/7QExz/

以下是我的导航栏代码：

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div
    <div class="navbar-collapse collapse" style="padding: 0;">
      <ul class="nav navbar-nav" style="overflow-y: hidden;">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

如您所见，当您单击下拉菜单时，它不会显示任何下拉菜单，而是增加容器的高度并在下拉按钮中添加水平滚动条。

但是，如果您减少可用空间量并强制导航栏在右侧创建移动式折叠按钮，则下拉菜单可以正常工作。

我无法理解这里出了什么问题。

Answer 1

删除外部ul 元素上的style="overflow-y: hidden;"。

ul 元素从 navbar 类继承它的高度。在ul 元素上设置overflow: hidden 会导致在navbar 类定义的高度之外显示的任何内容都被隐藏。

Answer 2

我删除了 style="overflow-y: hidden;" 我不知道为什么会出现在首位。

http://jsfiddle.net/7QExz/2/

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse" style="padding: 0;">
      <ul class="nav navbar-nav">
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Teams <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

Answer 3

通过使用overflow-y: hidden，您是在告诉浏览器隐藏超出元素高度的任何内容，并在必要时显示水平滚动条。在这种情况下，单击下拉菜单会显示菜单，但下拉菜单的宽度大于 Teams 元素。如果您删除它，那么平板电脑/桌面视图中的下拉菜单将正确显示。

在移动视图中，padding: 0 会导致出现水平滚动条。 Bootstrap 的网格系统使用负边距，同样正填充。通过将左右内边距从 15px 更改为 0，您将抵消 -15px 的左右边距的偏移量，从而导致水平滚动条。

同时删除 padding: 0 和 overflow-y: hidden 将导致菜单的行为与 Bootstrap 预期的一样。如果您尝试完成 Bootstrap 设计之外的其他事情，那么这个事实并没有那么清楚。

Updated fiddle.