bootstrap-4 - 如何在导航中右对齐下拉菜单？

Question

我正在尝试将下拉菜单添加到导航栏 - 但是虽然图标是右对齐的，但菜单会以左对齐方式打开，尽管我使用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
}