Bootstrap导航栏Dropdown menu超出屏幕右侧问题求助

在导航栏（navbar）中添加下拉菜单后，菜单显示时始终超出页面右侧，页面右侧还因此出现多余空白，但下拉功能正常。

问题代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">PEL</a>
  <div class="btn-group">
    <button
      type="button"
      class="btn btn-secondary dropdown-toggle mr-3"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">${pseudo}</button>
    <div class="dropdown-menu dropdown-menu-right">
      <button
        class="dropdown-item dropdown-menu-right"
        type="button">Action</button>
      <button
        class="dropdown-item dropdown-menu-right"
        type="button">Another action</button>
      <button
        class="dropdown-item dropdown-menu-right"
        type="button">Something else here</button>
    </div>
  </div>
</nav>

问题截图 #

问题核心是给**菜单项（dropdown-item）**错误添加了dropdown-menu-right类——这个类仅作用于下拉菜单容器，给菜单项添加后会破坏布局，导致菜单偏移出页面。

修改步骤 #

• 仅保留下拉菜单容器<div class="dropdown-menu dropdown-menu-right">的dropdown-menu-right类
• 移除所有<button class="dropdown-item">上的dropdown-menu-right类

修正后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">PEL</a>
  <div class="btn-group">
    <button
      type="button"
      class="btn btn-secondary dropdown-toggle mr-3"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="false">${pseudo}</button>
    <div class="dropdown-menu dropdown-menu-right">
      <button
        class="dropdown-item"
        type="button">Action</button>
      <button
        class="dropdown-item"
        type="button">Another action</button>
      <button
        class="dropdown-item"
        type="button">Something else here</button>
    </div>
  </div>
</nav>

补充说明 #

确保页面已引入Bootstrap的JS依赖，否则下拉交互可能失效：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

内容的提问来源于stack exchange，提问作者LePain Demi