Django中使用if语句后Bootstrap导航栏CSS样式异常问题

1. {% if cat_menu %}包裹导致样式失效 #

问题根源是破坏了Bootstrap下拉菜单的完整DOM结构。Bootstrap的下拉依赖.dropdown容器、.dropdown-toggle按钮和.dropdown-menu列表的层级关系，若用{% if %}直接包裹整个下拉结构，当条件不满足时结构缺失，或条件满足时结构嵌套错误，都会导致样式/交互失效。

修复方案：保留完整结构，仅在内部判断内容 #

保持下拉的基础DOM结构不变，只在菜单列表内部判断cat_menu是否存在，同时可给按钮加disabled类避免无效点击：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle {% if not cat_menu %}disabled{% endif %}" 
     href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    分类
  </a>
  <ul class="dropdown-menu">
    {% if cat_menu %}
      {% for item in cat_menu %}
        <li><a class="dropdown-item" href="{% url 'category' item %}">{{ item }}</a></li>
      {% endfor %}
    {% else %}
      <li><span class="dropdown-item-text">暂无分类数据</span></li>
    {% endif %}
  </ul>
</li>

2. 仅将ul放入if语句内得到空白列表 #

空白列表大概率是模板变量未正确传递或cat_menu本身无数据：

• 检查视图函数中是否正确查询并传递cat_menu：

from .models import Category

def your_view(request):
    # 确保查询到分类数据
    cat_menu = Category.objects.all()
    return render(request, 'your_template.html', {'cat_menu': cat_menu})

• 若确实无分类数据，可通过{% else %}分支添加提示文本（如上述代码所示），避免空白。

3. 移至用户认证分支后按钮间距过大 #

间距问题是因为认证/未认证分支的导航项结构不一致，Bootstrap的.nav-item默认间距依赖统一的DOM结构。

修复方案：保持两个分支的导航项结构完全一致 #

在{% if user.is_authenticated %}和{% else %}分支中，都保留完整的下拉菜单结构，仅根据状态调整内容和可用性：

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  {% if user.is_authenticated %}
    <li class="nav-item">
      <a class="nav-link" href="{% url 'dashboard' %}">控制台</a>
    </li>
    <!-- 认证用户的分类下拉 -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle {% if not cat_menu %}disabled{% endif %}" 
         href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        分类
      </a>
      <ul class="dropdown-menu">
        {% if cat_menu %}
          {% for item in cat_menu %}
            <li><a class="dropdown-item" href="{% url 'category' item %}">{{ item }}</a></li>
          {% endfor %}
        {% else %}
          <li><span class="dropdown-item-text">暂无分类数据</span></li>
        {% endif %}
      </ul>
    </li>
  {% else %}
    <li class="nav-item">
      <a class="nav-link" href="{% url 'login' %}">登录</a>
    </li>
    <!-- 未认证用户的分类下拉（禁用状态） -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle disabled" 
         href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
        分类
      </a>
      <ul class="dropdown-menu">
        <li><span class="dropdown-item-text">请登录查看分类</span></li>
      </ul>
    </li>
  {% endif %}
</ul>

额外注意：确保模板中正确加载Bootstrap的CSS和JS资源，版本匹配且加载顺序正确（CSS在前，JS在后）。

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