折叠的引导菜单栏不起作用答案

【问题标题】：Collapsed bootstrap menu bar not working折叠的引导菜单栏不起作用
【发布时间】：2015-01-18 04:09:18
【问题描述】：

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

我的引导代码如下所示：

	#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>

有人知道我做错了什么吗？

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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;
        }
    }

【讨论】：

谢谢！完美解决问题

【解决方案2】：

只需正确引用 bootstrap.css 和 bootstrap.js，您的代码就可以正常工作。

【讨论】：