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

Question

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

Ale*_*vis 3 css navbar twitter-bootstrap twitter-bootstrap-3

下面的代码与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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Zim*_*Zim 8

这是3.0.2中的已知问题(https://github.com/twbs/bootstrap/issues/11243)

解决方法:

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，9 月前
查看次数：	5346 次
最近记录：	11 年，9 月前