Bootstrap 3 - Artikel Schwimmer rechts in der Navigation

Question

Dies ist meine aktuelle Navigation:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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="#">ApplicationName</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav" id="main-navigation"> 
       <li><a href="#">Item1</a></li> 
       <li><a href="#">Item2</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Mit diesem Navigations ich dies mit bin:

Was ich will, tatsächlich ist dies:

Ich habe versucht, das Anker-Tag zu schweben, aber es schwebt nur innerhalb des Li-Tags. In ExtJS habe ich das '->' Element, das mir dieses Verhalten bietet. Wie kann ich das machen?

Ich benutze Bootstrap 3.1.1.

Vielen Dank. :)

Answer 1

Fügen Sie die pull-right Klasse in die ul-Tag

Voll Beispiel:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <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="#">ApplicationName</a> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav" id="main-navigation"> 
       <li><a href="#">Item1</a></li> 
      </ul> 
      <ul class="nav navbar-nav pull-right" id="main-navigation"> 
       <li><a href="#" class="pull-right">Item2</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Ergebnis:

Answer 2

Sie haben das Element zu geben, dieses:

CSS

li.right { 
    position: absolute; 
    right: 0; 
} 

HTML

<nav class="navbar navbar-default" role="navigation"> 
<div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <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="#">ApplicationName</a> 
    </div> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav" id="main-navigation"> 
      <li><a href="#">Item1</a></li> 
      <li class="right"><a href="#">Item2</a></li> 
     </ul> 
    </div> 
</div> 

Working Example

Answer 3

wie des neuen Bootstrap, nicht wir Pull-rechts

Ab v3.1.0 verwenden, haben wir als veraltet .pull- direkt in den Dropdown-Menüs. Um ein Menü rechtsbündig auszurichten, verwenden Sie .dropdown-menu-right. Rechts ausgerichtete Navigationskomponenten in der Navigationsleiste verwenden eine Mix-Version dieser Klasse, um das Menü automatisch auszurichten. So überschreiben Sie es, verwenden .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel"> 
... 
</ul> 

wenn Sie haml verwenden

%ul.nav.navbar-nav.navbar-right/ 
     %li 
      %a{:href => "http://yoursitelogo.co/"} 
      %img{:alt => "Some site", :height => "50", :src => "/assets/image.png"} 

Answer 4

Wenn Sie die Klasse .justify-content-between auf das Element auf der linken Seite hinzufügen, sollte es schieben alles danach nach rechts.