引导程序4导航栏下拉菜单右键

Question

正如您在下图中看到的，当我单击钟形图标时，图标右下方会出现一个下拉菜单。我想让这个下拉菜单出现在左下角而不是右下角。我该怎么办？

如果你想看到我的代码，它的写有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; 
    } 

然后，这个输出将回荡在一个HTML文件：

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

Answer 1

使用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

更新Bootstrap4-β：

因为有bug in bootstrap4 beta我不得不添加

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

，使其工作。