如何实现Bootstrap下拉菜单相对于触发按钮居中对齐

Bootstrap 下拉组件默认依赖 Popper.js 做动态定位，会根据视口可用空间自动将菜单对齐到触发按钮的左侧或右侧，要固定实现居中对齐，可按以下方案操作：

方案1：CSS 覆盖实现（兼容所有5.x版本，最稳定） #

该方案无需修改JS逻辑，通过自定义样式强制菜单水平居中，不受自动定位逻辑影响：

• 首先修正现有代码问题：你重复引入了Bootstrap的JS文件，bootstrap.bundle.min.js已经包含Popper依赖和所有组件逻辑，单独引入bootstrap.min.js会导致组件报错，删除多余的JS引入即可。
• 给触发按钮添加data-bs-display="static"属性，禁用Popper对该下拉菜单的动态位置调整，让菜单完全受CSS控制：

<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
  <i class="fa-solid fa-bell"></i>
</button>

• 添加自定义CSS，强制下拉菜单相对触发按钮水平居中：

.dropdown {
  position: relative;
}
.dropdown .dropdown-menu {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

如果不希望全局影响所有下拉菜单，可以给需要居中的下拉菜单加专属类（比如dropdown-menu-center），把样式作用在该类上即可。

方案2：使用内置类（仅适用于 Bootstrap 5.2及以上版本） #

如果你可以将项目中的Bootstrap版本升级到5.2及以上，不需要写自定义CSS，直接给外层.dropdown容器添加.dropdown-center类即可自动实现居中：

<div class="dropdown dropdown-center">
  <!-- 按钮和下拉菜单代码不变 -->
</div>

注意事项 #

• 禁用Popper动态定位后，如果触发按钮距离视口边缘过近，下拉菜单可能出现超出视口的情况，可根据实际业务场景给菜单设置固定宽度、添加响应式偏移规则适配。
• 如果需要保留Popper的边缘检测、自动翻转垂直位置的能力，可以去掉data-bs-display="static"属性，仅保留上述CSS的left和transform规则，即可实现大部分场景下的居中效果，仅在空间极度不足时才会触发位置调整。

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