NgBootstrap：如何将下拉菜单定位在搜索输入框下方

嘿，我完全懂你这个需求！默认情况下ng-bootstrap的下拉菜单是跟着触发按钮的宽度走的，要让它像Gmail那样铺满整个搜索栏的宽度，只需要加几行CSS就能搞定。

问题根源 #

ng-bootstrap的dropdown-menu默认是绝对定位，并且相对于触发它的按钮来定位，所以宽度只会匹配按钮或者菜单内容的宽度。我们需要把它的定位基准改成整个输入组容器，然后强制宽度占满。

解决方案 #

添加下面的CSS规则：

/* 把输入组设为相对定位，作为下拉菜单的定位基准 */
.input-group[ngbDropdown] {
  position: relative;
}

/* 让下拉菜单铺满整个输入组的宽度 */
.input-group .dropdown-menu {
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  /* 可选：如果菜单选项过多，添加滚动条避免超出页面 */
  max-height: 220px;
  overflow-y: auto;
}

修改后的完整代码示例 #

<!-- Search bar-->
<style>
.input-group[ngbDropdown] {
  position: relative;
}

.input-group .dropdown-menu {
  left: 0 !important;
  right: 0 !important;
  width: 100%;
}
</style>
<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-append" ngbDropdown role="group" aria-label="Button group with nested dropdown">
    <button class="btn btn-outline-success" ngbDropdownToggle></button>
    <div class="dropdown-menu" ngbDropdownMenu>
      <button class="dropdown-item">One</button>
      <button class="dropdown-item">Two</button>
    </div>
  </div>
</div>

额外说明 #

• 用!important是为了覆盖ng-bootstrap默认的left定位值，如果你给输入组加了自定义类名（比如search-input-group），可以用.search-input-group .dropdown-menu这种更具体的选择器，就能去掉!important，让代码更易维护。
• 可选的max-height和overflow-y是为了防止菜单选项太多时撑满页面，你可以根据自己的需求调整数值。

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