Question

下面的代码与Bootstrap 3.0.0 CSS文件一样正常工作，但是当它与Bootstrap 3.0.2 CSS一起使用时（我认为也是3.0.1），它在以下场景下无法正常工作：

打开页面。
调整浏览器窗口的大小（使其缩小）以触发响应式菜单。
展开菜单，使其显示子菜单1和2。
调整浏览器窗口的大小（使其变大）以触发正常菜单。

展开的菜单不会显示在页面上。看起来它的高度包含在导航栏的高度内，因此它显示为滚动条。从这一点开始，下拉菜单不会超出导航栏的下边距，因此您需要使用滚动条进行导航。

如果您引用3.0.0版本的bootstrap CSS，那么它可以正常工作。我尝试使用两个版本的Bootsrap JS文件，但它似乎没有任何区别。

以下是完整的HTML代码：

<!DOCTYPE html>
<html lang="en-us"> 
<head>
<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css">-->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/jscript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js" type="text/javascript"></script>
<style>
body {
    padding-top: 50px;
}
</style>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <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">
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Submenu 1</a></li>
                    <li><a href="#">Submenu 2</a></li>
                </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
</div>
</div>
</div>
<h1>Hello!</h1>
</body>
</html>

这是Bootstrap的已知问题还是我做错了什么？

Answer 1

这是3.0.2（https://github.com/twbs/bootstrap/issues/11243）

中的已知问题

解决方法：

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

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

恢复扩展的响应式导航栏菜单会在Bootstrap 3.0.2中创建滚动条

1 个答案: