如何将Bootstrap dropdown-menu定位到指定输入控件下方？

完全不用放弃Bootstrap的dropdown组件来做这个搜索下拉效果，只需要调整一下定位逻辑就行。我平时做类似的搜索组件也经常这么搞，给你分享具体的实现步骤：

1. 调整HTML结构 #

首先把输入框和触发按钮放在同一个.dropdown容器里，这样我们可以统一控制定位关系：

<div class="dropdown position-relative d-flex align-items-center">
  <!-- 搜索输入框 -->
  <input type="text" class="form-control flex-grow-1" id="searchInput" placeholder="输入关键词搜索">
  <!-- 触发下拉的按钮 -->
  <button class="btn btn-primary ms-2 dropdown-toggle" type="button" id="searchDropdownBtn" data-bs-toggle="dropdown" aria-expanded="false">
    搜索
  </button>
  <!-- 下拉菜单（用来展示搜索结果） -->
  <ul class="dropdown-menu" aria-labelledby="searchDropdownBtn">
    <li><a class="dropdown-item" href="#">结果1：Bootstrap下拉定位</a></li>
    <li><a class="dropdown-item" href="#">结果2：自定义下拉位置</a></li>
    <li><a class="dropdown-item" href="#">结果3：搜索组件实现</a></li>
  </ul>
</div>

这里用了d-flex和flex-grow-1让输入框占满剩余空间，按钮紧跟在旁边。

2. 自定义CSS定位 #

Bootstrap默认的.dropdown-menu是相对于触发按钮定位的，我们需要把它改成相对于输入框的位置：

/* 覆盖默认下拉菜单的定位 */
.dropdown .dropdown-menu {
  position: absolute;
  /* 定位到输入框的正下方，加4px间距避免紧贴 */
  top: calc(100% + 4px);
  left: 0;
  /* 让下拉菜单宽度和输入框完全一致 */
  width: 100%;
  /* 如果搜索结果多，加滚动条 */
  max-height: 240px;
  overflow-y: auto;
}

/* 因为输入框和按钮是flex布局，需要给dropdown容器设置最小宽度，避免换行 */
.dropdown {
  min-width: 300px;
}

这里的关键是利用.dropdown容器的position-relative作为定位基准，让下拉菜单的left:0对齐输入框的左侧，top:calc(100% +4px)刚好落在输入框下方。

3. 可选：JS动态适配（响应式场景） #

如果你的输入框宽度会随屏幕变化，或者需要更精确的定位，可以用JS在触发下拉时动态计算位置：

const dropdownBtn = document.getElementById('searchDropdownBtn');
const dropdownMenu = dropdownBtn.nextElementSibling;
const searchInput = document.getElementById('searchInput');

// 监听按钮点击事件
dropdownBtn.addEventListener('click', () => {
  // 获取输入框相对于dropdown容器的位置
  const inputOffset = searchInput.getBoundingClientRect();
  const containerOffset = dropdownBtn.parentElement.getBoundingClientRect();
  
  // 动态设置菜单的位置和宽度
  dropdownMenu.style.top = `${inputOffset.bottom - containerOffset.top + 4}px`;
  dropdownMenu.style.left = `${inputOffset.left - containerOffset.left}px`;
  dropdownMenu.style.width = `${inputOffset.width}px`;
});

这样不管输入框怎么变，下拉菜单都能精准对齐它的下方。

额外提示 #

• 记得在搜索结果动态更新时，确保下拉菜单的内容正确渲染，Bootstrap的dropdown组件会自动处理show类的切换，不用手动控制显示隐藏。
• 如果需要点击页面其他地方关闭下拉，Bootstrap的dropdown默认已经支持这个功能，不需要额外代码。

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