bootsrap : navbar에서 요소를 올바르게 플로팅하는 방법은 무엇입니까?

Question

<header> 
<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="navbar-brand" href="index.php"> 
       <img style="margin-top:-15px" src="img/kiss.png" alt=""/> 
       </a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li id="index_li"><a href="index.php">Accueil</a></li> 
       <li id="about_li"><a href="about.php">A propos</a></li> 
       <li id="contact_li"><a href="contact.php">Contact</a></li> 

       <ul class="nav navbar-nav" > 
        <li class="divider-vertical"></li> 
        <li id="signOut_li"><a href="account.php" >Vos données</a></li>  
        <li id="signOut_li"><a href="logOut.php" >Se déconnecter</a></li> 
       </ul> 
      <ul class="nav navbar-nav" style="float: right"> 
      <li><a href="#contact" class="navbar-nav pull-right">Credits</a></li> 
      </ul> 

      </ul> 
      </div> 
     </div> 
</div> 
</header> 

"Credits"float을 오른쪽으로 만들고 싶습니다.

 <ul class="nav navbar-nav" style="float: right"> 
     <li><a href="#contact" class="navbar-nav pull-right">Credits</a></li> 
     </ul> 

는하지만, 도움이되지 않습니다

나는 것을 사용!

바이올린에 : http://jsfiddle.net/c8xtkz60/

Answer 1

난 당신 here을 위해 함께 bootply을 넣어. navbar-right을 사용하면 찾고있는 해결책이므로 읽기 예제 bootstrap's을 권하고 싶습니다. 귀하의 주요 문제는 당신이 서로 내부에 그들을 설정 시작 </ul> 태그의 순서였다. 또 다른 문제는 뷰포트의 전체 너비를 차지하는 container-fluid을 사용하지 않는 것이 었습니다.

<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=".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="navbar-brand" href="index.php"> 
      <img style="margin-top:-15px" src="img/kiss.png" alt=""/> 
      </a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li id="index_li"><a href="index.php">Accueil</a></li> 
      <li id="about_li"><a href="about.php">A propos</a></li> 
      <li id="contact_li"><a href="contact.php">Contact</a></li> 

      <ul class="nav navbar-nav" > 
       <li class="divider-vertical"></li> 
       <li id="signOut_li"><a href="account.php" >Vos données</a></li>  
       <li id="signOut_li"><a href="logOut.php" >Se déconnecter</a></li> 
      </ul>      
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#contact" >Credits</a></li> 
     </ul> 
     </div> 
    </div> 
</nav>