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

由于您想将整个导航对齐到导航栏的右侧，您可以简单地在导航链接部分之前添加一个空白的 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/

Answer 2

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

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

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

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

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

文档：Bootstrap flex utilities

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

2 个答案: