Bootstrap 4下拉菜单超出屏幕：如何使其适配屏幕显示？

针对下拉菜单超出屏幕的情况，有几种简单实用的解决方式：

方法1：使用内置右对齐类 #

给下拉菜单添加dropdown-menu-right类，让菜单向触发按钮的左侧展开，避免超出屏幕右侧：

<div class="dropdown">
  <i
    class="far fa-user-circle ml-4"
    type="button"
    data-toggle="dropdown"
    aria-expanded="false"
    style="font-size:36px"></i>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Change Password</a>
    <a class="dropdown-item" href="#">Logout</a>
  </div>
</div>

方法2：设置视口边界约束 #

通过data-boundary="viewport"属性，让下拉菜单以浏览器视口为边界自动调整展开位置，从根源避免超出屏幕：

<div class="dropdown">
  <i
    class="far fa-user-circle ml-4"
    type="button"
    data-toggle="dropdown"
    aria-expanded="false"
    data-boundary="viewport"
    style="font-size:36px"></i>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Change Password</a>
    <a class="dropdown-item" href="#">Logout</a>
  </div>
</div>

方法3：自定义CSS强制调整（可选） #

如果以上内置方案不满足需求，可以通过自定义CSS强制菜单右对齐：

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

这种方式适合触发按钮固定在屏幕右侧的场景。

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