Bootstrap 3 navbar沒有完全崩潰

Question

我正在使用Bootstrap 3，並且我對可摺疊的導航欄有一些問題。問題在於它顯示所有菜單項，然後自動調整大小，只顯示看起來像的第一個菜單項。

HTML如下：

<nav class="navbar navbar-custom" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     </div> 
    </div> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#"><i class="fa fa-home"></i></a></li> 
     <li class="politics"><a href="#">Politica</a></li> 
     <li class="headerDivider"></li> 
     <li class="society"><a href="#">Societate</a></li> 
     <li class="economics"><a href="#">Economie</a></li> 
     <li class="external"><a href="#">Extern</a></li> 
     <li class="life-style"><a href="#">Stil de viata</a></li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </nav> 

而對於導航欄的CSS：

.navbar-custom { 
     background-color:#303334; 
     color:#ffffff; 
     border-radius:0; 
     margin-bottom: 0; 
     border: none; 
     margin: 0; 
    } 

    .navbar-custom .navbar-nav > li > a { 
     color:#fff; 
     padding-left:20px; 
     padding-right:20px; 
    } 

    .navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { 
     color: #ffffff; 
     background-color:transparent; 
    } 

    .navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #007faa; 
    } 

    /** Custom Hover Colors **/ 

    .navbar-custom .navbar-nav > li.politics > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #a70500; 
     transition: background .15s ease-in-out; 
     -moz-transition: background .15s ease-in-out; 
     -webkit-transition: background .15s ease-in-out; 
    } 
    .navbar-custom .navbar-nav > li.society > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #781b92; 
     transition: background .15s ease-in-out; 
     -moz-transition: background .15s ease-in-out; 
     -webkit-transition: background .15s ease-in-out; 
    } 
    .navbar-custom .navbar-nav > li.economics > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #24af5f; 
     transition: background .15s ease-in-out; 
     -moz-transition: background .15s ease-in-out; 
     -webkit-transition: background .15s ease-in-out; 
    } 
    .navbar-custom .navbar-nav > li.external > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #fe9d01; 
     transition: background .15s ease-in-out; 
     -moz-transition: background .15s ease-in-out; 
     -webkit-transition: background .15s ease-in-out; 
    } 
    .navbar-custom .navbar-nav > li.external > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #fe9d01; 
     transition: background .15s ease-in-out; 
     -moz-transition: background .15s ease-in-out; 
     -webkit-transition: background .15s ease-in-out; 
    } 
    .navbar-custom .navbar-nav > li.life-style > a:hover, .nav > li > a:focus { 
     text-decoration: none; 
     background-color: #cd3ac1; 
     transition: background .15s ease-in-out; 
     -moz-transition: background .15s ease-in-out; 
     -webkit-transition: background .15s ease-in-out; 
    } 

    .navbar-custom .navbar-nav > li.politics-active > a { 
     color:#fff; 
     background: #a70500; 
     padding-left:20px; 
     padding-right:20px; 
    } 

    .navbar-custom .navbar-nav > li.society-active > a { 
     color:#fff; 
     background: #781b92; 
     padding-left:20px; 
     padding-right:20px; 
    } 

    .navbar-custom .navbar-nav > li.economics-active > a { 
     color:#fff; 
     background: #24af5f; 
     padding-left:20px; 
     padding-right:20px; 
    } 

    .navbar-custom .navbar-nav > li.external-active > a { 
     color:#fff; 
     background: #fe9d01; 
     padding-left:20px; 
     padding-right:20px; 
    } 

    .navbar-custom .navbar-nav > li.life-style-active > a { 
     color:#fff; 
     background: #cd3ac1; 
     padding-left:20px; 
     padding-right:20px; 
    } 

    .navbar-collapse.in { 
     overflow-y: auto; 
     height: 251px; 
    } 

    /** End hover colors **/ 

    .navbar-custom .navbar-brand { 
     color:#eeeeee; 
    } 

    .navbar-custom .navbar-toggle { 
     background-color:#eeeeee; 
    } 

    .navbar-custom .icon-bar { 
     background-color:#007faa; 
    } 

    .navbar-nav { 
     font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;  
     text-transform: uppercase; 
     height: 30px; 

    } 

    .fa-home { 
     font-size: 1.2em; 
    } 

    .navbar-nav > li { 
     padding-right: 25px; 
     margin: 0; 
    } 

Bootply

Answer 1

這是因爲該行的高度屬性：

.navbar-nav { 
    font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;  
    text-transform: uppercase; 
    height: 30px; /* <-- remove this one */ 

} 

Answer 2

您的問題是在你的CSS：

評論高度屬性在

.navbar-nav { 
    font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;  
    text-transform: uppercase; 
// height: 30px; 

} 

Bootply：http://www.bootply.com/124660