2016-11-09 272 views
0

我正在爲我的網站設計一個側面導航欄。它的工作很好,直到中等屏幕尺寸,但當屏幕尺寸減少(< 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>

有人可以提出任何解決辦法嗎? 在此先感謝。

+0

對我而言,無論屏幕大小如何,這段代碼都是混亂的。也就是說,在使用float時,通常需要使用clearfix來製作包含 – LGSon

+0

「navbar-nav」類的內容的父級大小。 – mkawa

回答

0

.navbar-nav類刪除餘量。

.navbar-nav{ 
    margin:0; 
} 

還注意到齒輪圖標被隱藏,直到767px。 codepen here