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
}

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

1 个答案: