Bootstrap响应式侧边栏改进版

<div class="container"> <nav class="navbar navbar-default mynavbar"> <div class="container-fluid">  <!--按钮-->  <div class="navbar-header">  <button type="button" class="navbar-toggle collapsed btn-sider" data-toggle="collapse" data-target="#side-menu" aria-expanded="false">   <span class="icon-bar"></span>   <span class="icon-bar"></span>   <span class="icon-bar"></span>  </button>  </div>  <!-- 导航条内容 -->  <div class="collapse navbar-collapse" id="side-menu">  <ul class="nav navbar-nav" id="side-item">   <li><a href="#">后端开发</a></li>   <li><a href="#">数据库</a></li>   <li class="dropdown">   <a href="#" class="dropdown-toggle" id="web-item" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">前端开发 <span class="caret"></span></a>   <!--下拉菜单按钮-->   <ul class="dropdown-menu">    <li><a href="#">HTML/CSS</a></li>    <li><a href="#">JavaScript</a></li>    <li><a href="#">jQuery</a></li>    <li><a href="#">Bootstrap</a></li>    <li><a href="#">node.js</a></li>   </ul>   </li>   <li><a href="#">移动开发</a></li>   <li><a href="#">视觉设计</a></li>   <li><a href="#">云计算</a></li>  </ul>  </div> </div> </nav></div>

 .mynavbar{  background-color: #fff;  border:none; } .navbar-header,#side-item{  background-color: #0b3558; } #side-menu>ul>li>a{  color:#fff;  font-size: 18px;  font-family: "Microsoft Yahei", Helvetica, sans-serif, Lato; } #side-menu>ul{  width: 100%; } #side-menu>ul>li{  text-align: center;  width: 16%;  margin-left: 5px; } #side-menu .dropdown-menu {  border: none;  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);  box-shadow: 0 6px 12px rgba(0,0,0,.175); } #side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover,#side-item>li>a:focus,#side-item >li>a:hover {  color: #24b0ff;  text-decoration: none;  background-color: transparent; } .btn-sider{  float: left;  border:none;  outline: none;  margin-left: 10px; } .mynavbar .btn-sider .icon-bar{  background-color:#fff;  width:23px;  height:3px; } .mynavbar .btn-sider:focus, .mynavbar .btn-sider:hover {  background-color: transparent; } @media (max-width: 768px) {  .container {  padding-left: 0px;  }  #side-menu{  border: none;  }  #side-item{  background: rgba(43, 54, 67, 0.97);  }  #side-menu>ul {  margin-top: 0px;  margin-right: 0px;  margin-left: -15px;  margin-bottom: 0px;  width: 40%;  height: 999px;  }  #side-menu>ul>li {  text-align: left;  width:100%;  margin-left:0px;  }  #side-menu>ul>li a{  font-size:16px;  }  #side-item>li>a:focus,#side-item >li>a:hover,#side-item .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{  background-color: #38a99c;  color:#fff;  }  #side-menu .dropdown-menu{  box-shadow:none;  }  #side-menu .dropdown-menu li a{  padding-top:10px;  color:#fff;  } }