Bootstrap 5与Flask无法为当前页面导航项设置active类求助

问题1：active_page值不匹配 #

你在子模板里设置的active_page = "edit_profile.html"，但base模板里判断的是active_page == 'edit_profile'，两者字符串不一致，导致条件不成立，无法添加active类。

修正子模板代码：

{% extends "base.html" %}
{% set active_page = "edit_profile" %}

问题2：缺少Bootstrap导航栏的必要结构类 #

Bootstrap 5的导航栏需要特定类才能正确渲染样式，你的代码里<ul>、<li>、<a>都缺少对应类，即便加上active也不会生效。

修正base.html里的导航栏代码：

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <ul class="navbar-nav">
    <li class="nav-item {{ 'active' if active_page == 'edit_profile' else '' }}">
      <a class="nav-link" href="{{ url_for('auth.edit_profile') }}">Link 1</a>
    </li>
    <li class="nav-item {{ 'active' if active_page == 'menu2' else '' }}">
      <a class="nav-link" href="/blah2"> Link 2 </a>
    </li>
  </ul>
</nav>

• 给<ul>加navbar-nav类，这是Bootstrap导航栏列表的必要标识
• 给<li>加nav-item类，标记导航项容器
• 给<a>加nav-link类，Bootstrap会为带active类的元素（或其父元素）应用激活样式

可选优化：直接给nav-link加active类 #

更贴合Bootstrap推荐用法的方式是把active类直接加到<a>标签上：

<li class="nav-item">
  <a class="nav-link {{ 'active' if active_page == 'edit_profile' else '' }}" href="{{ url_for('auth.edit_profile') }}">Link 1</a>
</li>

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