Bootstrap 4 Navbar Dropdown-Menü Rechts

Question

Wie auf dem Bild unten zu sehen, wenn ich auf das Glockensymbol klicke, erscheint ein Dropdown-Menü unten rechts auf dem Symbol. Ich möchte, dass dieses Dropdown-Menü unten links statt unten rechts angezeigt wird. Was soll ich machen?

Wenn Sie meinen Code sehen wollen, ist es mit php geschrieben:

function navigation(){ 
    $output = ""; 
    $icons = ["user","bell","envelope","commenting"]; 
    $rows = [2,5,5,5]; 
    for ($i=0; $i < count($icons) ; $i++) { 
     $output .= '<div class="dropdown">'; 
     $output .= '<a class="nav-item nav-link" data-toggle="dropdown">'; 
     $output .= '<i class="fa fa-'.$icons[$i].'"></i></a>'; 
     $output .= '<div class="dropdown-menu text-right">'; 
     for ($j=0; $j < $rows[$i] ; $j++) { 
     $output .= '<a href="#" class="dropdown-item">'.($j+1).'</a>'; 
     } 
     $output .= '</div>'; 
     $output .= '</div>'; 
    } 
    return $output; 
    } 

Und dann wird diese Ausgabe in eine HTML-Datei hallte werden:

<nav class="navbar"> 
    <div class="container"> 
    <div class="navbar-nav d-flex flex-row"> 
     <?= navigation() ?> 
    </div> 
    </div> 
</nav> 

Answer 1

Verwenden die dropdown-menu-right Klasse ..

<div class="dropdown-menu dropdown-menu-right text-right"> 
     <a class="dropdown-item" href="#">Link</a> 
     <a class="dropdown-item" href="#">Link</a> 
     <a class="dropdown-item" href="#">Link</a> 
    </div> 

http://codeply.com/go/6Mf9aK0P8G

Answer 2

Update für Bootstrap4-Beta:

Da es eine bug in bootstrap4 beta ist hatte ich

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
} 

hinzufügen, damit es funktioniert.