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

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

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

Answer 2

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

在移动视图中，padding: 0会显示水平滚动条。 Bootstrap的网格系统使用负边距，具有相同的正填充。通过将左右填充从15px更改为0，可以抵消-15px左右边距的偏移，从而导致水平滚动条。

删除padding: 0和overflow-y: hidden将导致菜单的行为与Bootstrap一样。如果你想要完成除Bootstrap设计之外的其他事情，那么这个事实就不那么明确了。

Updated fiddle

Answer 3

我删除了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>

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

3 个答案: