Bootstrap 5 导航栏 - 当品牌位于左侧时，无法将导航项移至右侧

Question

我在正确放置项目时遇到问题。我的品牌在左侧，无论我尝试什么。我拿不到右边的东西 navbar.They 一直抱在左边。

这是我的代码：

 <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

由于您希望将整个导航对齐到导航栏的右侧，您可以简单地在导航 link 之前添加一个空白 div，margin-right 为 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/

Answer 2

Bootstrap 附带了几个可在此处使用的 flexbox 实用程序 classes。

由于 .navbar-collapse class 设置为 display: flex 而此元素内只有 2 children，我们可以添加 .justify-content-between class 迫使 2 children 坐在两端。

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

或者，如果 .navbar-collapse 元素将有超过 2 个 children，您可以将 .ml-auto 实用程序放在 ul 元素上以强制它位于右边。

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

文档：Bootstrap flex utilities

Bootstrap 5 导航栏 - 当品牌位于左侧时，无法将导航项移至右侧

Bootstrap 5 navbar - Can't get nav items to the right side, when brand is on the left side

html

css

navbar

bootstrap-5