从Bootstrap4迁移至Bootstrap5如何修正导航栏对齐及移动端菜单失效问题

问题根因 #

两个异常均来自Bootstrap5相对Bootstrap4的破坏性变更，原有适配Bootstrap4的代码未做类名、属性调整导致：

• 对齐失效：Bootstrap5改用逻辑属性替代物理方向的间距类名，旧版用于撑出右侧自动外边距的mr-auto、mr-4均被替换，没有对应类名则无法实现自动推挤右侧模块的效果，导致登录、注册入口左对齐。
• 折叠按钮失效：Bootstrap5所有交互组件的自定义属性统一增加bs前缀，旧版的data-toggle、data-target属性不再被组件JS识别，因此点击按钮无交互反馈。

修正步骤 #

按以下点修改原有导航栏代码即可：

• 品牌链接的mr-4替换为me-4
• 折叠按钮的属性替换：
  • data-toggle改为data-bs-toggle
  • data-target改为data-bs-target
• 左侧导航块的mr-auto替换为me-auto

修正后完整代码 #

<header class="site-header">
  <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
    <div class="container">
      <a class="navbar-brand me-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>
</header>

额外校验点 #

如果修改后仍有异常，确认本地引入的Bootstrap5完整包含了组件JS文件（路径正确、未遗漏），否则即使属性修改正确也无法触发折叠交互。

内容的提问来源于stack exchange，提问作者kendellfincher