我遇到一个引导导航栏的问题。
我使用navbar-static-top制作菜单 – 起初它是好的。当菜单扩展和添加的项目很少,现在以前的宽度来折叠,它扩展到两条看起来很糟糕的行。在CSS bootstrap’a深入挖掘,但没有太多的成功。请帮忙,怎么到这里?
目前看来如下:
导航栏代码:
<div class="navbar-wrapper"> <div class="container"> <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="bright-logo-text navbar-brand" href="index.html">Clipboard Stripper</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="index.html">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="features.html">Features</a></li> <li><a href="screenshots.html">Screenshots</a></li> <li class="active"><a href="usage.html">Usage</a></li> </ul> </li> <li><a href="features.html">Features</a></li> <li><a href="screenshots.html">Screenshots</a></li> <!--li class="active"><a href="usage.html">Usage</a></li--> <li><a href="download.html">Download</a></li> <li><a href="purchase.html">Purchase</a></li> <!--li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> </ul> </li--> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="contact.html">Contact</a></li> <li> </li> </ul> </div> </div> </div> </div> </div>
解决方法
我也想通过CSS使用它,而无需重新加载和自定义Bootstrap,Skelly的答案在Bootstrap 3上工作正常,但在我的情况下Bootstrap 3.2 CSS更改了一个…这是所有CSS的更新版本所需
@media (max-width:992px){ .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; Box-shadow: inset 0 1px 0 rgba(255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .collapse.in{ display:block !important; } }