## bootstrap响应式导航条 >#### 效果如图  >html ``` <div class="mx-nav container-fluid"> <nav class="navbar navbar-default" role="navigation" id="navbar"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse" id="btn"> <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="#" id="logo"></a> </div> <div class="collapse navbar-collapse navbar-ex1-collapse" id="nav-right"> <ul class="nav navbar-nav navbar-right" id="mx-navigation"> <li class="select"><a href="javascript:void(0)">首页</a></li> <li><a href="javascript:void(0)">关于公司</a></li> <li><a href="javascript:void(0)">产品展示</a></li> <li><a href="javascript:void(0)">招商加盟</a></li> <li><a href="javascript:void(0)">联系我们</a></li> </ul> </div> </nav> </div> ``` >css ``` .mx-nav { width: 80%; margin: 0 auto; } #logo { display: inline-block; width: 241px; height: 80px; } #navbar { padding: 0; margin: 0; background-color: #fff; } .navbar-header>a { display: inline-block; width: 241px; height: 80px; background: url("../images/logo0.png") no-repeat center center; } .select { border-bottom: 2px solid #2dae36; } #nav-right a { padding-top: 30px; padding-bottom: 30px; border-bottom: 2px solid rgba(0, 0, 0, 0); } .mx-nav .navbar-default .navbar-toggle .icon-bar { background-color: #2dae36; } .mx-nav .navbar-default .navbar-toggle { border-color: #2dae36; margin: 23px auto; } .mx-nav .navbar { border: none; } ```