Bootstrap 5 导航栏图标不会右对齐

Question

论坛的新手，出于个人兴趣，我正在做一个完整的堆栈开发课程，早期，有一个导航栏的问题，我已经没有想法了，想知道是否有人可以提供帮助。

当导航栏折叠时，折叠图标始终出现在屏幕左侧，品牌旁边。 我希望它出现在右侧。

我的导航条码如下

  <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <div class="container-fluid">
      <div class="d-flex flex-grow-1">
        <!--<span class="w-100 d-lg-none d-block"> -->
          <a class="navbar-brand" href="#"><span><img src="images/ABC Logo.jpg" height="30" width="50" pad="15"></span>  ABC Childcare</a>
        <div class="W-100 text-right">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          </div>
      </div>

        <div class="collapse navbar-collapse flex-grow-1 text-right" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="btn btn-primary dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                Our Settings
              </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <li><a class="dropdown-item" href="#">Culcheth</a></li>
                    <li><a class="dropdown-item" href="#">Cobbs Infants</a></li>
                    <li><a class="dropdown-item" href="#">Broomfields Junior</a></li>
                    <li><a class="dropdown-item" href="#">Meadowbank Primary</a></li>
                    <li><a class="dropdown-item" href="#">ST Michaels</a></li>
                    <li><a class="dropdown-item" href="#">Boothstown Methodist Primary</a></li>
                    <li><a class="dropdown-item" href="#">Ince Community Centre</a></li>
                    <li><a class="dropdown-item" href="#">Ince Childrens Centre</a></li>

                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#">Ramsbotton</a></li>
                  </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"  href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

我已经尝试了各种与按钮相关的方法，例如 float-xs-justify、ms-auto 和 me-auto，但似乎没有任何区别。 我使用了来自各种网站的大量代码，然后为了我的目的对其进行了一些调整。

任何帮助将不胜感激。

谢谢

Answer 1

你可以试试这个nav navbar-nav navbar-right bootstrap class。

<nav class="navbar navbar-default" role="navigation">
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>