Bootstrap 5 个导航栏位置元素

Question

所以我一直在使用 Bootstrap-5 和创建导航栏的“新”方法，我最喜欢它。但出于某种原因，我似乎无法让最后一个元素右对齐，有人有什么建议吗？

这是现在的样子：https://jsfiddle.net/FoTL_Development/428wyt6q/72/

<nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">
            <button class="navbar-toggler" 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>
            
            <span class="navbar-toggler">Brand Name</span> <!-- Get the hide/apper effect but without the style -->
            <!-- Left Element -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" href="#">Left</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Left</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Left</a>
                </li>
              </ul>
            </div>
            <!-- End Left Element -->

            <!-- Center Element -->
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0 m-auto">
                <li>Center</li>
              </ul>
            </div>
            <!-- End Center Element -->

            <!-- Right Element -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li>Right</li>
              </ul>
            </div>
            <!-- End Right Element -->

          </div>
        </nav>

Answer 1

您可以使用 ms-auto 将最后一个元素向右推...

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <button class="navbar-toggler" 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>
        <span class="navbar-toggler">Brand Name</span> <!-- Get the hide/apper effect but without the style -->
        <!-- Left Element -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">Left</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Left</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Left</a>
                </li>
            </ul>
        </div>
        <!-- End Left Element -->
        <!-- Center Element -->
        <div class="collapse navbar-collapse">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0 m-auto">
                <li>Center</li>
            </ul>
        </div>
        <!-- End Center Element -->
        <!-- Right Element -->
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li>Right</li>
            </ul>
        </div>
        <!-- End Right Element -->
    </div>
</nav>

https://codeply.com/p/y2YCYHmcYQ

此外，您似乎在中央导航栏上有一个不必要的 me-auto。

Bootstrap 5 个导航栏位置元素

Bootstrap 5 Navbar Position Elements

css

navbar

bootstrap-5