Bootstrap 4 Navbar rechts ausrichten

Question

Ich arbeite an einer Navbar Vorlage von Bootstrap 4 Website, aber ich habe ein Problem in Bezug auf die Position der Kollaps Nav Elemente. Der Umschaltknopf befindet sich ursprünglich auf der linken Seite der Navigationsleiste sowie in den Listenelementen.

Aber ich möchte sie auf der rechten Seite der Seite, also habe ich eine Float-xs-rechts-Klasse auf die Schaltfläche und Nav-Elemente eingefügt. Wenn ich dann auf die Umschaltfläche klicke, werden die Minimierungselemente nicht richtig positioniert. Wie Sie auf dem Screenshot sehen können.

Navbar screenshot

Ich möchte den Zusammenbruch Elemente unten und auf der linken Seite positioniert werden.

Btw, hier ist mein Code:

<nav class="navbar navbar-light bg-faded"> 
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
<a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 

<div class="collapse navbar-toggleable-md" id="main-navbar"> 
    <ul class="nav navbar-nav"> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Home</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Bio</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Gallery</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Details</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Awards</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">More info</a> 
    </li> 
    </ul> 
</div> 
</nav> 

Auch hier ist meine codepen für dieses navbar:

http://codepen.io/marcvs/pen/PGvqBO

Vielen Dank im Voraus.

Answer 1

Für Bootstrap 4 Alpha 6/Beta: Bootstrap 4 align navbar item to the right

Dies ist der richtige Weg, es zu tun. Sie möchten das Menü standardmäßig nach links verschieben. Float den Knopf rechts (float-xs-right) auf alles, aber es kann nicht gesehen werden (hidden-lg-up) und dann float-lg-right die ul für es zu arbeiten, wie Sie wollen.

Sehen Sie diese codepen:

http://codepen.io/anon/pen/mAYAKd?editors=1100

es gut funktioniert.

Hinweis diese zusätzliche CSS:

@media screen and (max-width: 992px){ 
    #main-navbar { 
     clear: both; 
    } 
} 

HTML:

<nav class="navbar navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> 
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 

    <div class="collapse navbar-toggleable-md" id="main-navbar"> 
     <ul class="nav navbar-nav float-lg-right"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Home</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Bio</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Gallery</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Details</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Awards</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">More info</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 

Answer 2

Hallo Siehe das untenstehende Beispiel. Obwohl ich es auf eine andere Weise getan habe, aber hoffe, Sie suchen dies.

<nav class="navbar navbar-default" role="navigation"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data- 
    target="#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> 
    &nbsp; 
    </div> 
    <a class="navbar-brand" href="#">Tribute Page | Tupac Shakur</a> 
    <div class="collapse navbar-collapse" id="navbar-collapse-1">  
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Bio</a></li> 
    <li><a href="#">Details</a></li> 
    <li><a href="#">Award</a></li> 
    <li><a href="#">More info</a></li> 

    </ul> 
    </div> 
    </nav> 

See The Fiddle NavBar Fiddle Demo

Hoffe, es hilft.