bootstrap navbar-static-top menu breaks on two lines

问题

I encountered a problem with the bootstrap navbar.

I Made menu using the navbar-static-top - at first it was all good. When menu was expanded and few items added, and now with the width before to collapse, it is spreading into two lines that looks awful. In CSS bootstrap'a dig deeper, but without much success. Please help, how to be here?

Currently it looks like shown here:

Navbar code:

<div class="navbar-wrapper">
  <div class="container">

    <div class="navbar navbar-inverse navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="bright-logo-text navbar-brand" href="index.html">Clipboard Stripper</a>
        </div>

        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="features.html">Features</a></li>
                <li><a href="screenshots.html">Screenshots</a></li>
                <li class="active"><a href="usage.html">Usage</a></li>
              </ul>
            </li>


            <li><a href="features.html">Features</a></li>
            <li><a href="screenshots.html">Screenshots</a></li>
            <!--li class="active"><a href="usage.html">Usage</a></li-->
            <li><a href="download.html">Download</a></li>
            <li><a href="purchase.html">Purchase</a></li>
            <!--li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
              </ul>
            </li-->
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="contact.html">Contact</a></li>
            <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>

回答1:

I also wanted to use it through CSS without redownloading and customizing Bootstrap, Skelly answer is working fine on Bootstrap 3 but in my case Bootstrap 3.2 the CSS changed a litte... Here is an updated version of all CSS required

    @media (max-width:992px){
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
     }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
     }
     .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    } 
}

回答2:

You can have it collapse sooner using a CSS media query. The default breakpoint is 768px. Here we change it to 990 pixels so that it collapses before the 2-line wrapping starts..

@media (max-width: 990px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Demo: http://www.bootply.com/119436

来源：https://stackoverflow.com/questions/22228239/bootstrap-navbar-static-top-menu-breaks-on-two-lines