Wie navigiere ich das Navigationsmenü im Bootstrap nach rechts?

Question

Ich habe eine Navbar mit Bootstrap gemacht, die ein Navigationsmenü & eine Schaltfläche enthält. Das Navigationsmenü befindet sich auf der linken Seite und die Schaltfläche auf der rechten Seite. Ich möchte ihre Position ändern, so dass das Menü auf der rechten Seite & bleiben würde der Button wäre auf der linken Seite. Bitte helfen Sie mir, wie so etwas zu tun .. Hier ist mein Code:

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="" class="navbar-brand">Wiredwiki</a> 
     </div><!-- Navbar Header --> 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
     <a href="" class="btn btn-warning navbar-btn navbar-right">Download Now</a> 
      <ul class="nav navbar-nav"> 
       <li><a href="#feedback">Feedback</a></li> 
       <li><a href="#gallery">Gallery</a></li> 
       <li><a href="#features">Features</a></li> 
       <li><a href="#faq">Faq</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul>    
     </div> 
    </div><!-- End Container --> 
</nav><!-- End Navbar --> 

Answer 1

Nutzen Sie navbar-left und navbar-right

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="" class="navbar-brand">Wiredwiki</a> 
     </div><!-- Navbar Header --> 
     <div class="collapse navbar-collapse" id="navbar-collapse"> 
     <a href="" class="btn btn-warning navbar-btn navbar-left">Download Now</a> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#feedback">Feedback</a></li> 
       <li><a href="#gallery">Gallery</a></li> 
       <li><a href="#features">Features</a></li> 
       <li><a href="#faq">Faq</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul>    
     </div> 
    </div><!-- End Container --> 
</nav><!-- End Navbar --> 

Answer 2

Verwenden Sie einfach die navbar-rechts und navbar-links classe des So:

<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar"> 
    <div class="container"> 
     <div class="navbar-header navbar-right"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="" class="navbar-brand">Wiredwiki</a> 
     </div><!-- Navbar Header --> 
     <div class="collapse navbar-collapse navbar-right" id="navbar-collapse"> 
     <a href="" class="btn btn-warning navbar-btn navbar-left">Download Now</a> 
      <ul class="nav navbar-nav"> 
       <li><a href="#feedback">Feedback</a></li> 
       <li><a href="#gallery">Gallery</a></li> 
       <li><a href="#features">Features</a></li> 
       <li><a href="#faq">Faq</a></li> 
       <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div> 
    </div><!-- End Container --> 
</nav><!-- End Navbar --> 

Answer 3

<div class="collapse navbar-collapse navbar-right" id="navbar-collapse"> 
    <a href="" class="btn btn-warning navbar-btn navbar-left">Download Now</a> 

ich hoffe, dass der obige Code für Sie arbeitet. Ich habe Navbar-Recht für das ganze Div, Navbar-links für den Knopf gemacht.