我正在使用Twitter bootstrap 2.3,当我使浏览器变小时,它会正确折叠,但当我点击按钮进行下拉菜单时,它不会出现在其他项目的前面。这是一个有效的演示:http://www.thehighlightnetwork.com/我一直在尝试在Chrome中的开发者工具中修复它,但无济于事。
以下是相关代码:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/"><img src="http://i.imgur.com/8dN9Ck1.png" alt="small logo" style="height:50px;"></a>
<div class="nav-collapse collapse" style="height:0px;">
<ul class="nav">
<li><a href="/">The Highlight Network</a></li>
<li><a href="http://thehighlightnetwork.com/blog/">Official Blog</a></li>
<li><a href="/profile" class="">Profile</a></li>
<li><a href="/logout" class="">Logout</a></li>
<li><a href="/login" class="">Sign Up!</a></li>
<li><a href="/videohandler">Upload</a></li>
</ul>
<ul class="nav pull-right">
<li>
<div class="center-it">
<form class="form-search" action="/search" method="GET" style="margin:0; margin-top:15px;">
<input type="text" name="search_tag" placeholder="search..." class="input-medium search-query pull-right">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
在官方demo site中,它推翻了我会满意的所有其他元素,或者我是否可以简单地将它放在其他元素的前面。
答案 0 :(得分:3)
固定导航栏的静态位置导致此问题,以下css将覆盖该问题并修复您的问题(在Chrome中确认)
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative !important;
}