Bootstrap 5 导航栏下拉菜单右对齐实现问题技术咨询

你的代码存在两处导致下拉菜单无法右对齐的问题：

• 下拉菜单被包裹在带me-auto属性的左侧导航<ul>容器内，me-auto会让这个左侧导航容器自动占满导航栏除了品牌和折叠按钮外的所有剩余宽度，内部元素加ms-auto没法突破父容器的布局限制
• 代码末尾有多余的</li>闭合标签，属于语法错误

修改后的完整代码 #

<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MacroTickets</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <!-- 左侧导航菜单 -->
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Events</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/artists">Artists</a>
          </li>
        </ul>
        <!-- 右侧下拉菜单 -->
        <ul class="navbar-nav mb-2 mb-lg-0 ms-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" 
               data-bs-toggle="dropdown" aria-expanded="false">Sign Up</a>
            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="/artists/new">As an Artist</a></li>
              <li><a class="dropdown-item" href="/users/register">As a Fan</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
</nav>

主要修改点 #

• 把下拉菜单从左侧导航的<ul>中拆分出来，单独放在新的<ul>容器中，给这个容器加ms-auto类即可自动推到导航栏最右侧
• 给下拉面板加了dropdown-menu-end类，避免小屏设备下下拉内容超出可视区域
• 删除了原代码里多余的错误闭合标签

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