Bootstrap 4 Navbar下拉菜单项目正确

Question

如下图所示,当我点击铃铛图标时,图标右下方会出现一个下拉菜单.我希望此下拉菜单显示在左下角而不是右下角.我该怎么办？

如果你想看我的代码,那就写着php:

function navigation(){
    $output = "";
    $icons = ["user","bell","envelope","commenting"];
    $rows = [2,5,5,5];
    for ($i=0; $i < count($icons) ; $i++) {
      $output .= '<div class="dropdown">';
      $output .= '<a class="nav-item nav-link" data-toggle="dropdown">';
      $output .= '<i class="fa fa-'.$icons[$i].'"></i></a>';
      $output .= '<div class="dropdown-menu text-right">';
      for ($j=0; $j < $rows[$i] ; $j++) {
        $output .= '<a href="#" class="dropdown-item">'.($j+1).'</a>';
      }
      $output .= '</div>';
      $output .= '</div>';
    }
    return $output;
  }

然后,此输出将在html文件中回显:

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      <?= navigation() ?>
    </div>
  </div>
</nav>

Answer 1

使用dropdown-menu-right该类对齐菜单内的项目..

    <div class="dropdown-menu dropdown-menu-right text-right">
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
        <a class="dropdown-item" href="#">Link</a>
    </div>

http://codeply.com/go/6Mf9aK0P8G

Answer 2

Bootstrap4-Beta更新:

因为bootstrap4 beta中有一个bug我必须添加

.dropdown-menu-right { 
    right: 0; 
    left: auto; 
}

使它工作.

Answer 3

引导程序5

@Zim 的答案可能是文档中建议的最正确的答案。

尽管如此，我设法让它发挥作用的唯一方法是使用类end-0。

<ul class="dropdown-menu end-0">
  <li><a class="dropdown-item" href="#">Save</a></li>
  <li><a class="dropdown-item" href="#">Fetch</a></li>
</ul>

Answer 4

.dropdown-menu-right如果类位于内，则该类具有不同的行为.navbar。您可以在以下文档中阅读“注意事项”：

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

实际要解决的我使用此类：

.navbar .dropdown-menu-right { 
    right: 0; 
    left: auto; 
}