防止导航栏崩溃

Question

我正在为我的网站设计侧面导航栏。 直到中等大小的屏幕都可以正常工作，但是当屏幕尺寸减小（<768px）时，一切都会变得混乱。 这是我的HTML和CSS代码

 .main .row { padding: 0px; margin: 0px; } /*Remove rounded coners*/ nav.sidebar.navbar { border-radius: 0px; } nav.sidebar, .main { -webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; } /* .....NavBar: Icon only with coloring/layout.....*/ /*Allow main to be next to Nav*/ .main { position: absolute; width: 100%; margin-left: 40px; float: right; } /*lets nav bar to be showed on mouseover*/ nav.sidebar:hover + .main { margin-left: 200px; } /*Center Brand*/ nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px; } /*Center Brand*/ nav.sidebar .navbar-brand, nav.sidebar .navbar-header { text-align: center; width: auto; margin-left: 0px; } /*Center Icons*/ nav.sidebar a { padding-right: 13px; } /*adds border top to first nav box */ nav.sidebar .navbar-nav > li:first-child { border-top: 1px #e5e5e5 solid; } .nav-collapse, .nav-collapse.collapse { overflow: visible; } .navbar .btn-navbar { display: none; } /*adds border to bottom nav boxes*/ nav.sidebar .navbar-nav > li { border-bottom: 1px #e5e5e5 solid; } /* Colors/style dropdown box*/ nav.sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } /*allows nav box to use 100% width*/ nav.sidebar, nav.sidebar .container-fluid { padding: 0 0px 0 0px; } /*colors dropdown box text */ .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #777; } /*gives sidebar width/height*/ nav.sidebar { width: 200px; height: inherit; margin-left: -160px; float: left; z-index: 8000; } /*give sidebar 100% width;*/ nav.sidebar li { width: 100%; } /* Move nav to full on mouse over*/ nav.sidebar:hover { margin-left: 0px; } /* .....NavBar: Fully showing nav bar..... */ nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus { color: #CCC; background-color: transparent; } nav:hover .forAnimate { opacity: 1; } section { padding-left: 15px; } 

 <nav class="navbar navbar-inverse sidebar" role="navigation"> <div class="container-fluid"> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home<span style="font-size:16px;" class="pull-right glyphicon glyphicon-home"></span></a> </li> <li><a href="#">Profile<span style="font-size:16px;" class="pull-right glyphicon glyphicon-user"></span></a> </li> <li><a href="#">Messages<span style="font-size:16px;" class="pull-right glyphicon glyphicon-envelope"></span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a> <ul class="dropdown-menu forAnimate" role="menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> <li class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li><a href="#">Home<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-home"></span></a> </li> <li><a href="#">Profile<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-user"></span></a> </li> <li><a href="#">Messages<span style="font-size:16px;" class="pull-right showopacity glyphicon glyphicon-envelope"></span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-cog"></span></a> <ul class="dropdown-menu forAnimate" role="menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li class="divider"></li> <li><a href="#">Separated link</a> </li> <li class="divider"></li> <li><a href="#">One more separated link</a> </li> </ul> </li> </ul> </div> </div> </nav> <div class="main"> <!-- Content Here --> </div> 

有人可以提出任何解决方案吗？ 提前致谢。

Answer 1

从.navbar-nav类中删除边距。

.navbar-nav{
  margin:0;
}

还请注意，齿轮图标一直隐藏到767px。 Codepen 在这里