Ruby on rails bootstrap5&；Rails：标题菜单，内容左中右，行为怪异

我正在为我的Bootstrap5项目编写一个简单的标题。 我们的想法是在左边有徽标，在中间有菜单，在右边有登录/注销

代码如下：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand ms-auto" href="http://www.foodissey.it">Foodissey</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav mx-auto">
                <%= link_to "Home", static_pages_home_path, class: "nav-link " %>
                <%= link_to "Il Progetto", static_pages_project_path, class: "nav-link " %>
                <%= link_to "Chi Siamo", static_pages_team_path, class: "nav-link " %>
                <%= link_to "Blog", static_pages_blog_path, class: "nav-link " %>
                <%= link_to "Shop", static_pages_shop_path, class: "nav-link " %>
                <%= link_to "Regalistica Aziendale", static_pages_b2b_path, class: "nav-link " %>
            </div>
            <div class="navbar-nav me-auto">
                <%= link_to "Login", '#', class: "nav-link " %>
            </div>   
        </div>
    </div>
</nav>

结果是“登录”不是在导航栏的右端，而是在中间的某个地方，我不明白为什么

编辑：这是没有erb参考的类似代码，在codeply上尝试过，我有相同的行为：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand ms-auto" href="http://www.foodissey.it">Foodissey</a>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="nav navbar-nav mx-auto">
                <a href="#" class="nav-link " %> Uno </a>
                <a href="#" class="nav-link " %> due </a>
                <a href="#" class="nav-link " %> tre </a>
                <a href="#" class="nav-link " %> quattro </a>
            </div>
            <div class="nav navbar-nav me-auto">
                <a href="#" class="nav-link " %> login </a>
            </div>   
        </div>
    </div>
</nav>

---

对于bootstrap 5，您的标记稍有偏差：

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
   <div class="container-fluid">
      <a class="navbar-brand d-flex w-50 me-auto" href="http://www.foodissey.it">Foodissey</a>
     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
            <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse w-100" id="navbarSupportedContent">
         <div class="nav navbar-nav w-100 justify-content-center">
            <a href="#" class="nav-link " %> Uno </a>
            <a href="#" class="nav-link " %> due </a>
            <a href="#" class="nav-link " %> tre </a>
            <a href="#" class="nav-link " %> quattro </a>
         </div>
         <div class="nav navbar-nav ms-auto w-100 justify-content-end">
            <a href="#" class="nav-link " %> login </a>
         </div>
      </div>
   </div>
</nav>

使用相应的代码笔：

请注意，

justify content-*

类-在Bootstrap5中使用flex布局时，这些类是定位事物的关键