下拉菜單不右對齊

Question

我有以下的導航欄結構（{{ current_user.username }}是從我的模板系統）：

<ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
    <!-- navbar items --> 
</ul> 
<div class="dropdown show"> 
    <a class="dropdown-toggle" style="color: inherit" href="#" id="dropdownLink" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
     <i class="fa fa-user" aria-hidden="true"></i> 
     {{ current_user.username }} 
    </a> 
    <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownLink"> 
     <li><a class="dropdown-item" href="#">Profile</a></li> 
     <!-- etc --> 
    </ul> 
</div> 

下拉部分對準右側屏幕上，但點擊它會顯示屏幕右側的下拉菜單，dropdown-menu-right類應該阻止。有任何想法嗎？

最小Codepen：https://codepen.io/Majora320/pen/jGwNrE

Answer 1

如果添加的樣式

right: 0 

到

.dropdown-menu 

樣式規則......它會做你想要什麼。