In Bootstrap 4 Beta, wie rechts ausrichten letzten Nav-Element?

Question

Ich habe diese einfache nav mit drei nav-Elemente in Bootstrap-4, beta:

<div class="container"> 
    <ul class="nav nav-pills"> 
     <li class="nav-item"> 
     <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a> 
     </li> 
    </ul> 
</div> 

Es sieht wie folgt aus:

Was würde Ich mag, ist für das nav-Element genannt Test3 rechts innerhalb der Ul.

Hier ist ein jsfiddle.

Wie kann ich das tun?

Answer 1

Sie können es tun, indem Sie ml-auto zum letzten Artikel hinzufügen. Damit wird der linke Rand auf auto gesetzt, was bedeutet, dass der maximal verfügbare Platz als Rand verwendet wird, sodass er nach rechts springt.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <ul class="nav nav-pills"> 
 
     <li class="nav-item"> 
 
     <a class="nav-link test1" data-toggle="pill" href="#test1" aria-expanded="false">Test1</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link test1" data-toggle="pill" href="#test2" aria-expanded="false">Test2</a> 
 
     </li> 
 
     <li class="nav-item ml-auto"> 
 
     <a class="nav-link test3" data-toggle="pill" href="#test3" aria-expanded="false">Test3</a> 
 
     </li> 
 
    </ul> 
 
</div>