右对齐引导导航项而不是下拉菜单答案

【问题标题】：Right-align a bootstrap nav-item not dropdown右对齐引导导航项而不是下拉菜单
【发布时间】：2023-02-20 23:47:18
【问题描述】：

我有一个导航栏，我试图将 Login/Register 放在导航栏的右侧。我看过这个网站上的其他答案，它们都是针对下拉菜单的，或者它们对我不起作用。这是导航栏代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark navbar-expand-md bg-dark justify-content-md-center justify-content-start">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-md-center text-left">
      <li class="nav-item">
        <a class="nav-link" href="/">HOME</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        AMENITIES
                    </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">NEIGHBOURHOOD SOCIAL DECK</a></li>
          <li><a class="dropdown-item" href="#">POOLS</a></li>
        </ul>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        RESOURCES
                    </a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">ACCEPTED PAINT COLORS</a></li>
          <li><a class="dropdown-item" href="#">PROCESS FOR CHANGE</a></li>
          <li><a class="dropdown-item" href="#">MANAGEMENT COMPANY CONTACT</a></li>
          <li><a class="dropdown-item" href="#">BOARD MEMBERS</a></li>
          <li><a class="dropdown-item" href="#">CLOSING INFORMATION</a></li>
          <li><a class="dropdown-item" href="#">MEETING MINUTES</a></li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CALENDAR</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact">CONTACT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/faq">FAQ</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Login/Register</a>
      </li>
    </ul>
  </div>
</nav>

我尝试用这个围绕登录/注册导航项目：<ul class="navbar-nav ml-auto">，但它没有用。我正在使用 Bootstrap 5.3。

【问题讨论】：

在您需要向左移动的 <li> 标签上，将类“ml-auto”放在该标签或“pull-right”上。

标签： html css bootstrap-5

【解决方案1】：

<nav class="navbar navbar-dark navbar-expand-md bg-dark justify-content-md-center justify-content-start">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-md-center text-left">
      <!-- existing navbar items -->
    </ul>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Login/Register</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：