Bootstrap 4 Menu déroulant Navbar Droite

Question

Comme vous pouvez le voir sur l'image ci-dessous, lorsque je clique sur l'icône de la cloche, un menu déroulant apparaît en bas à droite de l'icône. Je veux que ce menu déroulant apparaisse en bas à gauche plutôt qu'en bas à droite. Que devrais-je faire?

Si vous voulez voir mon code, il est écrit avec php:

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; 
    } 

Et puis, cette sortie sera un écho dans un fichier html:

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

Answer 1

Utilisation la classe dropdown-menu-right ..

<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

Mise à jour pour Bootstrap4-Beta:

Parce qu'il ya une bug in bootstrap4 beta que je devais ajouter

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

pour le faire fonctionner.