Bootstrap 5 右侧dropdown-menu被截断 旧对齐类无效如何解决

问题根源 #

Bootstrap 5 为适配RTL（从右到左）书写语言的布局需求，已完全弃用旧版的 .dropdown-menu-left、.dropdown-menu-right 方向控制类，替换为使用 start/end 命名的响应式方向类，因此旧版本的解决方案无效。

修复步骤 #

你需要下拉菜单定位在用户链接的左下方，只需要给下拉菜单的 <ul> 标签添加 .dropdown-menu-end 类即可：该类会让下拉菜单与触发按钮的右边缘对齐，整体向左下方展开，不会向右超出容器导致截断。
修改后的对应代码片段如下：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown"
    aria-expanded="false">Username
  </a>
  <!-- 新增dropdown-menu-end类控制对齐方向 -->
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
    <li><a class="dropdown-item" href="/logout">Log Out</a></li>
  </ul>
</li>

异常排查 #

如果添加类后仍存在截断问题，可依次排查：

• 检查下拉菜单的所有父级元素是否设置了 overflow: hidden 属性，该属性会裁剪超出容器的内容，修改为 overflow: visible 即可
• 检查是否有自定义样式覆盖了 Bootstrap 的下拉菜单定位规则

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