在从 Bootstrap 4 迁移到 Bootstrap 5 时更正对齐方式的变化？

如何解决在从 Bootstrap 4 迁移到 Bootstrap 5 时更正对齐方式的变化？

我在 Flask(Python) 上的一个博客网站上工作，使用 Bootstrap 4。我使用的是 Bootstrap 4 CDN，然后当 Bootstrap 5 出现时，我切换到 Bootstrap 5（本地）。

我面临两个问题。

1. 在我的导航栏上，登录和注册是“ 右对齐“，现在在 Bootstrap 5 上它是“左对齐”。
2. 在响应式移动布局上，菜单按钮不起作用。

如果我只是切换到 Bootstrap 4，这两个问题都不存在。

如何在 Bootstrap 5 中校正对齐方式？

如何使菜单按钮在响应式布局上工作？

What I want. ( note: this was on Bootstrap 4 )

How it is. ( note: this is on Bootstrap 5 )

<header class="site-header">

  <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">

    <div class="container">

      <a class="navbar-brand mr-4" href="/">Flask Blog</a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" 
data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarToggle">

        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
          <a class="nav-item nav-link" href="{{ url_for('about') }}">About</a>
        </div>

        <!-- Navbar Right Side -->

        <div class="navbar-nav">
         {% if current_user.is_authenticated %} 
            <a class="nav-item nav-link" href="{{ url_for('logout') }}">logout</a>
            <a class="nav-item nav-link" href="{{ url_for('account') }}">Account</a>
         {% else %}
            <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
            <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
         {% endif %}
        </div>

      </div>
    </div>
  </nav>
</header>

解决方法

将您的班级 mr-auto 更改为 me-auto 从 bootstrap spacing in bootstrap 5.0

查看此页面

                <div class="navbar-nav me-auto">
                    <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
                    <a class="nav-item nav-link" href="{{ url_for('about') }}">About</a>
                </div>

另外，对于你的按钮不工作，你应该做一点改变： 将其更改为在 bs 和 data-toggle

之间添加 data-target

所以它会是这样的：data-bs-toggle 和 data-bs-target

来自：

   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle"
                    aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

到：

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle"
                aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

不要忘记查看有关 navbar 的引导程序文档，这里是您的代码的工作副本：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">


<header class="site-header">

  <nav class="navbar bg-dark navbar-expand-md navbar-dark bg-steel fixed-top">

    <div class="container">

      <a class="navbar-brand mr-4" href="/">Flask Blog</a>

      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>


      <div class="collapse navbar-collapse" id="navbarToggle">

        <div class="navbar-nav me-auto">
          <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
          <a class="nav-item nav-link" href="{{ url_for('about') }}">About</a>
        </div>

        <!-- Navbar Right Side -->

        <div class="navbar-nav">
          {% if current_user.is_authenticated %}
          <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
          <a class="nav-item nav-link" href="{{ url_for('account') }}">Account</a> {% else %}
          <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
          <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a> {% endif %}
        </div>

      </div>
    </div>
  </nav>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.5.4/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/js/bootstrap.min.js"></script>
  </body>

  </html>

如果这没有帮助，请告诉我。