引導崩潰太快

Question

我的引導導航欄斷裂成兩行，而有一些剩餘空間：

在導航欄，我也Navbar的權利：

 <ul class="nav navbar-nav"> 
      <li class="active"><a class="txt-c" href="/home/"><p><i class="fa fa-bandcamp"></i></p>Home</a></li> 
      <li class=""><a href="/sample/"><p><i class="fa fa-codepen"></i></p>Demo</a></li> 
      <li class=""><a href="/sample/"><p><i class="fa fa-file-text"></i></p>Notice</a></li> 
      <li class=""><a class="txt-c" href="/contact/"><p><i class="fa fa-envelope-open"></i></p>Contact</a></li> 
      <li class=""><a href="/sample/"><p><i class="fa fa-shopping-cart"></i></p>Purchase</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class=""><a class="nav-signin" href="/signin">Log in</a></li> 
      <li class=""><a class="nav-signup" href="/signup">Sign up</a></li> 
      <li class="dropdown"> 
       <a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EN<span class="caret"></span></a> 
       <ul class="dropdown-menu"> 
        <li><a class="nav-lang" href="?lang=fr"><span class="pad-l-10 fnt-rob pad-t-10">Français</span></a></li> 

       </ul> 
      </li> 
     </ul> 

如何在摺疊之前使navbar-nav和navbar-right最接近？

Answer 1

如果我理解你的問題它是qui簡單來說，只需從bootstrap覆蓋.navbar-right規則即可。在我的例子我插入margin-right:150px;

https://jsfiddle.net/f7pw4ouk/

Answer 2

您可以編寫新的媒體規則或重寫引導斷點

我試圖重現您的問題

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li><a href="index.php">Home</a></li> 
       <li><a href="about.php">About</a></li> 
       <li><a href="#portfolio">Portfolio</a></li> 
       <li><a href="#">Blog</a></li> 
       <li><a href="contact.php">Contact</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class=""><a class="nav-signin" href="/signin">Log in</a></li> 
       <li class=""><a class="nav-signup" href="/signup">Sign up</a></li> 
       <li class="dropdown"> 
        <a href="#/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EN<span class="caret"></span></a> 
        <ul class="dropdown-menu"> 
         <li><a class="nav-lang" href="?lang=fr"><span class="pad-l-10 fnt-rob pad-t-10">Français</span></a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

範例CSS：

@media (min-width: 550 px) { 
    .navbar-nav > li { 
     float: left; 
    } 
    .navbar-right { 
     float: right!important; 
     margin-right: -15 px; 
    } 
    .nav { 
     display: inline-block; 
    } 
    .navbar-collapse.collapse { 
     display: block; 
    } 
    .navbar-header { 
     display: none; 
    } 
    .navbar .navbar-nav .open .dropdown-menu { 
     position: absolute; 
     right: 0; 
     left: auto; 
     display: block; 
     background: #000000; 
    } 
} 

我試圖挽救的例子http://www.bootply.com/MvKdHiXkyW#