navのドロップダウンメニューを右揃えにするにはどうすればよいですか？

Question

私はnavbarにドロップダウンメニューを追加しようとしていますが、アイコンが右揃えになっている間は、dropdown-menu-rightを使用していてもメニューは左揃えで開きます。私はpopprが位置決めのために使用されていることを見ました - navを除いて。どうすればメニューを右揃えにすることができますか？ここ

フィドル：https://jsfiddle.net/mbaas/dk3tpeex/5/

<nav id="TOP" class="navbar navbar-light d-flex"> 
    <div class="navbar-brand d-inline">BLA</div> 
    <div data-toggle="dropdown" class="navbar-brand d-inline ml-auto" id="menu" aria-expanded="false"><span class="fa fa-bars"></span></div> 
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="menu"> 
    <button onclick="javascript:alert('Hi!');" class="dropdown-item" type="button" id="toggleLeft">MenuItem</button> 
    </div> 
</nav> 

Answer 1

私はdropdown-menuクラスの次の属性を変更します。この特定の場合：

.dropdown-menu { 
    left: initial; 
    right: 0; /* add right with 0 or a low pixel value */ 
} 

また、独自のクラスを作成するアプローチとオーバーライドをたどることができこのdropdown-menuクラスの元の属性。あなたはナビゲーションバーで、標準のドロップダウンボタンを使用しようとしているので

#dd.dropdown-menu { 
    left: initial; 
    right: 0 
}