折叠的引导菜单栏无法正常工作

Question

当我的网页显示在小型设备上时，菜单会按预期折叠，但是当您单击折叠的菜单图标时，菜单不会显示。菜单下方页面的垂直高度略有调整，最后一个菜单项的一半出现在页面顶部，但菜单的其余部分无处可见。

My Bootstrap代码如下所示：

	#myNavbar {
		position: relative;
		border:none;
	}
	#myNavbar .nav {
		position: absolute; 
		bottom: 0; 
		right: 0;
		margin-bottom: -10px;
	}
	.navbar-nav.navbar-right:last-child {
    	margin-right: 0;
	}
	.navbar-default {
		background:#FFFFFF;
		border-left:none;
		border-right:none;
		border-top:none;
		border-bottom:solid;
		border-bottom-width:2px;
		border-color:#01B6AC;
		width:100% !important;
		margin-right:0px;
		padding-right:0px;
		border-radius: 0 !important;
  		-moz-border-radius: 0 !important;
	}
	

    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
           </button>
         <a class="navbar-brand" href="#"><img class="img-responsive" src="/assets/img/outa.png" width="120px;"/></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav pull-right">
              <li><a href="/browser/saved/">Saved searches</a></li>
              <li><a href="../index.html">Settings</a></li>
              <li><a href="../index.html">About</a></li>
              <li><a href="../index.html">Sign In</a></li>
          </ul>
        </div>
      </div>     
    </nav>

任何人都知道我做错了什么？

Answer 1

你的问题在这里

#myNavbar .nav {
    position: absolute;
}

当你使用position:absolute;时，元素绝对会从第一个定位的父div中定位，如果它找不到它将完全从窗口定位。您可以参考 THIS 问题获取更多信息。所以你可以做的是添加@media query并设置一个大小超过位置绝对的特定像素。像

这样的东西

@media(min-width: 400px) {
        #myNavbar .nav {
            position: absolute;
            bottom: 0;
            right: 0;
            margin-bottom: -10px;
        }
    }

Answer 2

只需提供bootstrap.css和bootstrap.js的正确参考，您的代码就可以正常工作。