我使用 Twitter Bootstrap 设计了一个完整的网站,它在大多数情况下都运行良好。我过去做过很多 CSS,但从来没有做过这样的框架。
我遇到的主要问题是,当浏览器低于 600 像素并且标题压缩成一个下拉列表(我想要的)时,下拉列表位于图像和一些 HTML 元素(如文本输入框和其他下拉菜单)后面。
有没有办法使这个标题下拉菜单不透明,以便它位于所有其他元素的前面?我会提供一些代码,但我不确定 Twitter Bootstrap 样式表的哪一部分会有所帮助。
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a 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>
</a>
<a class="brand" href="/">Exployre</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="/map">Find</a></li>
<li><a href="/shareadventure">Share</a></li>
<li><a href="/home">Inspire</a></li>
<li><a href="/posts">Discuss</a></li>
<li><a href="/groups">Groups</a></li>
<li><a href="/profile">Profile</a></li>
<li><a href="/about">About</a></li>
<li>
<form action="/search" class="navbar-search">
<div>
<input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
我相信所有这些类都直接来自 Twitter Bootstrap CSS,无需修改。