Bootstrap 4.0.0右对齐导航栏下拉菜单在打开时退出视口

Question

有没有办法使用Bootstrap 4.0.0修复此问题？我希望打开的下拉菜单的右边缘与下拉切换按钮的右侧对齐。这是一张图片，您可以看到它当前是如何出现的。

代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">CS50Net</a>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <div class="btn-group">
        <button type="button" class="btn btn-danger">{{ session.username }}</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </li>
  </ul>
</nav>

Answer 1

尝试将.dropdown-menu-right课程添加到<div class="dropdown-menu">