Bootstrap 3导航栏未完全折叠

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

您的问题出在您的CSS中：

在

中注释height属性

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

}

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

Answer 2

这是因为这一行的高度属性：

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

}