简单的 Twitter 引导导航栏下拉列表不显示下拉列表，而是扩展导航栏的高度

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设计之外的东西，那么这个事实还没有那么清楚。

更新的小提琴。