Angular 7中ng-bootstrap下拉菜单placement属性失效，菜单超出屏幕

我帮你梳理了这个问题，其实是两个小细节没处理到位，导致下拉菜单跑到屏幕外面去了，下面是具体的解决方法：

问题根源 #

1. 指令冲突：你同时使用了原生Bootstrap的data-toggle="dropdown"等下拉属性，和ng-bootstrap的ngbDropdownToggle指令，两者的逻辑会相互干扰，影响下拉菜单的定位。
2. 方向设置错误：你给ngbDropdown设置了placement="bottom-right"，这个属性会让下拉菜单向右下方展开，而你的导航栏在屏幕右侧，自然就会超出边界。

修复步骤 #

步骤1：移除原生Bootstrap的下拉属性 #

删掉data-toggle="dropdown"、aria-haspopup="true"这些原生属性，ng-bootstrap的指令已经封装了这些交互逻辑，不需要重复添加。

步骤2：调整下拉菜单的展开方向 #

把placement="bottom-right"改成placement="bottom-left"，让下拉菜单相对于导航项向左下方展开，这样就不会超出屏幕右侧了。

修复后的完整代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown" ngbDropdown placement="bottom-left">
        <a class="nav-link dropdown-toggle" ngbDropdownToggle href="#" id="navbarDropdown" role="button" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" ngbDropdownMenu 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>
    </ul>
  </div>
</nav>

备选方案：自定义CSS强制定位 #

如果调整placement属性后还是有问题，可以添加自定义CSS来强制下拉菜单向左对齐：

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

这段代码会让所有导航栏右侧的下拉菜单从父元素的右侧向左展开，彻底避免超出屏幕的问题。

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