带有下拉菜单右侧类的下拉菜单与右侧不对齐

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类应该阻止该下拉菜单。有什么想法吗？

Minimal Codepen：https://codepen.io/Majora320/pen/jGwNrE

Answer 1

如果添加样式

right: 0

到

 .dropdown-menu

样式规则......它会做你想要的。