Bootstrap 5导航栏-当品牌在左侧时，无法将导航项目移到右侧[重复]

Question

我在将项目移到正确位置时遇到问题。我的品牌在左侧，无论我尝试什么。我无法将项目放到导航栏的右侧。它们一直紧贴在左侧。

这是我的代码：

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavCollapse" aria-controls="NavCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="NavCollapse">
      <a class="navbar-brand ms-10" href="#">
      <img src="logo.png" class="img-fluid">
      </a>
    
    <ul class="navbar-nav">
       <li class="nav-item active">
       <a class="nav-link menutext active" href="index.php">Home</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="articles.php">Articles</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="games.php">Games</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">NG Boiler Room</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Catch Me Live</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="events.php">Event Calendar</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Gallery</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Projects</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="credits.php">Credits</a>
       </li>
    </ul>
    
      </div>
      </div>
    </nav>

我不知道，我在那里做错了什么。是我搞砸了还是我错过了代码中的某些内容？

Answer 1

Bootstrap 包含几个可以在此处使用的 flexbox 实用程序类。

由于.navbar-collapse 类设置为display: flex 并且该元素内只有2 个孩子，我们可以添加.justify-content-between 类来强制2 个孩子坐在相反的两端。

<div class="collapse navbar-collapse justify-content-between" id="NavCollapse">

或者，如果.navbar-collapse 元素有两个以上的子元素，您可以将.ml-auto 实用程序放在ul 元素上以强制它位于右侧。

<ul class="navbar-nav ml-auto">

文档：Bootstrap flex utilities

Answer 2

由于您希望将整个导航对齐到导航栏的右侧，您可以简单地在导航链接部分之前添加一个空白 div，其边距为 auto，这会将导航推到右侧一边。

<div class="me-auto"></div>

在您的原始导航栏代码中，此实现如下所示：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavCollapse" aria-controls="NavCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="NavCollapse">
      <a class="navbar-brand ms-10" href="#">
      <img src="logo.png" class="img-fluid">
      </a>

    <div class="me-auto"></div>
    
    <ul class="navbar-nav">
       <li class="nav-item active">
       <a class="nav-link menutext active" href="index.php">Home</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="articles.php">Articles</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="games.php">Games</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">NG Boiler Room</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Catch Me Live</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="events.php">Event Calendar</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Gallery</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Projects</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="credits.php">Credits</a>
       </li>
    </ul>
    
      </div>
      </div>
    </nav>

如需了解更多信息并了解详细实现，请查看导航栏上的 Bootstrap 文档：

https://getbootstrap.com/docs/5.0/components/navbar/