Bootstrap 4.0.0右对齐导航栏下拉菜单打开时超出视口[重复]

Posted 2023-03-06

【中文标题】Bootstrap 4.0.0右对齐导航栏下拉菜单打开时超出视口[重复]

【英文标题】：Bootstrap 4.0.0 Right aligned navbar dropdown menu goes out of viewport when opened [duplicate]

【发布时间】：2018-08-31 03:31:23

【问题描述】：

有没有办法使用 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>

---

【问题讨论】：

你能做一个jsfiddle来复制这个问题吗？

@Studocwho 我本来打算为你做的，但下面的 Lahar Shah 回答了它，只需要添加一个类 dropdown-menu-right。无论如何，谢谢！

参考这个：***.com/questions/42046287/…

【参考方案1】：

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

【讨论】：

很好，谢谢。当我这样时，将标记为答案。干杯！