Bootstrap导航栏移动端下拉框居中异常问题求助

问题分析 #

大屏设备导航栏表现正常：logo居左，用户下拉菜单与货币标识居右；但小屏设备中，汉堡菜单位置符合预期（下拉框右侧），但用户下拉框被居中而非靠右。

解决方案 #

问题根源是小屏时包含用户下拉的容器未正确设置靠右对齐，navbar-end类在此场景下未生效，需替换为强制靠右的flex布局类：

1. 将原代码中包含用户下拉的<div class="navbar-end order-md-4 order-1">修改为<div class="d-flex justify-content-end order-md-4 order-1">
2. 修正原代码中未闭合的<a>标签（避免潜在DOM解析问题）

修改后完整代码 #

<nav class="navbar navbar-expand-md cus-bg-elevated sticky-top cus-box-shadow">
  <div class="container-fluid">
    <div class="navbar-start order-0">
      <a class="navbar-brand" href="http://url.net">
        <img src="https://www.getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="Bootstrap" width="30" height="24">
      </a>
      <p>a</p>
    </div>
    <div class="d-flex justify-content-end order-md-4 order-1">
      <li class="nav-item d-flex dropdown">
        <p class="text-warning" style="margin:5px 5px 0 0;font-size:18px;">$</p>
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="fa-regular fa-user" style="font-size: 30px;"></i>
        </a>
        <ul class="dropdown-menu dropdown-menu-end" style="padding-top:0;font-size:16px;">
          <p class="text-light bg-secondary" style="margin:0px;padding:2px 2px 2px 6px;border-radius:4.7px 4.7px 0 0;">user</p>
          <li><hr class="dropdown-divider" style="margin-top:0;"></li>
          <li><a class="dropdown-item" href="http://url.net/users?id="><i class="fa-light fa-user"></i> Profile</a></li>
          <li><a class="dropdown-item" href="http://url.net/settings/"><i class="fa-light fa-gear"></i> Settings</a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item text-danger" href="http://fans.great-site.net/logout"><i class="fa-light fa-arrow-right-from-bracket"></i> Logout</a></li>
        </ul>
      </li>
    </div>

    <button class="navbar-toggler order-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    </div>

  </div>
</nav>

说明 #

• d-flex justify-content-end强制容器内元素在小屏时靠右排列，同时保留order-md-4 order-1维持元素顺序，确保汉堡菜单位置不变
• 修正未闭合标签避免浏览器解析异常

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