如何使用Bootstrap实现导航栏菜单项右对齐？

问题根因 #

• 你当前使用的是 Bootstrap 5 版本（从data-bs-toggle属性可以判断），Bootstrap 5 已经废弃了旧版 Bootstrap 4 中的ml-*/mr-*边距类，替换为逻辑边距类：ms-*对应左外边距、me-*对应右外边距，你写的ml-auto在当前版本中不会生效。
• 你给<ul>标签同时加了me-auto属性，这个属性的作用是给元素右侧添加自动外边距，会直接把整个导航列表推到容器左侧，就算ml-auto生效也会被这个属性抵消。

解决方法 #

修改<ul>标签的类属性即可：

1. 删除me-auto类
2. 把ml-auto替换为 Bootstrap 5 对应的ms-auto类

修改后的<ul>标签代码如下：

<ul class="navbar-nav mb-2 mb-lg-0 ms-auto">

修改后的完整导航栏代码：

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mb-2 mb-lg-0 ms-auto">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a
              class="nav-link dropdown-toggle"
              href="#"
              id="navbarDropdown"
              role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><hr class="dropdown-divider" /></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

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