いくつかのスペースがあるのに対し、ブートストラップが2行に速すぎ

Question

私のブートストラップのナビゲーションバーの休憩を崩壊：ナビゲーションバーで

を、私はまた、ナビゲーションバーの右ています

 <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のです単純に、.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#