如何右对齐导航中的下拉菜单？

Question

我正在尝试将下拉菜单添加到导航栏 - 但是当图标右对齐时，菜单打开时左对齐，尽管我使用 dropdown-menu-right。我看到一条关于 poppr 用于定位的评论 - nav 除外。那么我该如何右对齐菜单呢？

Fiddle 这里：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 class 的以下属性：

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

您也可以按照创建自己的 class 的方法并覆盖此 dropdown-menu class.

的原始属性

这是另一个关于如何右对齐菜单的建议：

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