bootstrap导航条

这个导航条是模仿 http://www.ghostchina.com 网站做的

效果如下：

<nav class="main-nav">
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-12">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<div>
						    <span class="fa"></span>
							<span class="fa"></span>
							<span class="fa"></span>
						</div>
									
					</button>
				</div>
						
				<div class="collapse navbar-collapse" id="main-menu">
					<ul class="menu">
						<li class="nav-current"><a href="#">首页</a></li>
						<li><a href="#">论坛</a></li>
						<li><a href="#">快捷手册</a></li>
						<li><a href="#">中文文档</a></li>
						<li><a href="#">下载</a></li>
						<li><a href="#">关于</a></li>
					</ul>
		    	</div>
			</div>
		</div>
	</div><!--/.container-fluid-->
</nav><!--/nav-->

css样式如下：

.main-nav{
	margin-bottom: 35px;
	text-align: center;
	border-bottom: solid 2px #e1e1e1;
	background-color: #fff;
}

.main-nav .menu li{
	display: inline-block;
	line-height: 64px;
}

.menu li a{
	padding: 0 21px;
	color: #505050;
}

.menu li a:hover{
	color: #e67e22;
}

.nav-current{
	border-bottom: solid 2px #e67e22;
	margin-bottom: -2px;
}

@media (max-width: 767px){
	.main-nav .menu li {
	    display: block;
	}
	
	.main-nav{
		text-align: left;
	}
}

.navbar-header{
	text-align: center;
}

.fa{
	display: block;
	/*margin-top: 4px;*/
	width: 20px;
	border-bottom: solid 3px #505050;
}

.fa+.fa {
    margin-top: 4px;
}