从 Bootstrap 4 迁移到 Bootstrap 5 时更正对齐更改？

Question

我在 Flask(Python) 上的博客网站上工作，使用 Bootstrap 4。我使用 Bootstrap 4 CDN，然后当 Bootstrap 5来了，我切换到Bootstrap5（本地）。

我面临两个问题。

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

如果我直接切换到Bootstrap4，这两个问题就不存在了

如何更正 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>

Answer 1

将您的 class 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>

此外，对于您的按钮不起作用，您应该稍作更改：将其更改为在 data-toggle 和 data-target

之间添加 bs

所以它会像这样：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 的 bootstrap 文档，这里是您的代码的工作副本：

<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>

如果没有帮助请告诉我。

从 Bootstrap 4 迁移到 Bootstrap 5 时更正对齐更改？

Correcting the alignment changes while migrating from Bootstrap 4 to Bootstrap 5?

twitter-bootstrap

bootstrap-modal

bootstrap-4

bootstrap-5