如何阻止Bootstrap 4下拉菜单向右溢出导致页面出现横向空白

问题根因 #

Bootstrap 4 下拉菜单默认向左对齐触发按钮的左边缘、向右展开，当按钮放在页面右上角时，展开的菜单宽度会超出页面视口右边界，触发横向滚动条，就会出现页面轻微右移、导航栏旁出现空白的情况。你当前代码中父容器加的dropdown-left类无法解决菜单右溢出的问题。

解决方法 #

给下拉菜单容器添加Bootstrap原生的dropdown-menu-right类，让菜单向右对齐触发按钮的右边缘、向左展开，就不会超出页面右边界。

修改后代码参考 #

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle bg-dark" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <!-- 新增dropdown-menu-right类 -->
  <div class="dropdown-menu dropdown-menu-right bg-dark" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item text-light" href="#">Action</a>
    <a class="dropdown-item text-light" href="#">Another action</a>
  </div>
</div>

兼容兜底方案 #

如果修改后部分场景仍有溢出，可给导航栏外层容器添加如下样式，避免全局横向滚动：

.navbar-container { /* 替换为你实际的导航栏外层类名 */
  overflow-x: clip;
}

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