<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<span class="nav-toggle-button collapsed" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-bars"></i>
</span>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="menu">
<li class="nav-current" role="presentation"><a href="/">首页</a></li>
<li role="presentation"><a href="#">论坛</a></li>
<li role="presentation"><a href="#">快捷手册</a></li>
<li role="presentation"><a href="#">中文文档</a></li>
<li role="presentation"><a href="#">下载</a></li>
<li role="presentation"><a href="#">关于</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
a{color: #e67e22;outline: none;text-decoration: none;}
.main-header .branding img{max-width: 100%;}
a:active,a:focus,a img{outline: none;}
.main-navigation{text-align: center;background: #fff;border-top: 1px solid #ebebeb;border-bottom: 3px solid #e1e1e1;margin-bottom: 35px;}
.main-navigation .menu {padding: 0;margin: 0;}
.main-navigation .menu li {list-style: none;display: inline-block;position: relative;}
.main-navigation .menu li.nav-current {border-bottom: 2px solid #e67e22;margin-bottom: -2px;}
.main-navigation .menu li a {color: #505050;line-height: 4em;display: block;padding: 0 21px;}
.main-navigation .menu li:hover > a {color: #e67e22;text-decoration: none;}
求问,为什么nav-header的内容显示不了,求高手解答,谢谢!
题主写一个在线的Demo吧。
建议题主按照Bootstrap的推荐结构来写,如下:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
http://v3.bootcss.com/examples/starter-template/