如何解决Bootstrap4顶部右侧下拉菜单溢出页面边界的问题？

方法1：使用Bootstrap内置类（推荐） #

Bootstrap 4 提供了原生的下拉菜单右对齐工具类，你只需要给你的 .dropdown-menu 元素添加 dropdown-menu-right 类即可，修改后对应代码片段如下：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <!-- 新增 dropdown-menu-right 类 -->
  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</li>

这个类的本质是修改了下拉菜单的定位规则，将默认的left: 0改为right: 0、left: auto，让下拉菜单的右边缘和触发按钮的右边缘对齐，不会超出页面右侧边界。

方法2：自定义CSS兜底 #

如果因为样式冲突等原因内置类不生效，可以手动添加如下CSS规则：

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

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