Django模板中BS5 tab-pane循环渲染异常求助

问题现象 #

用Bootstrap 5原生代码做带标签页和对应面板的页面，适配Django模板后出现两个异常：

• 页面加载完成后，初始状态下没有任何面板内容显示
• 切换到其他标签页再切回第一个时，所有面板的内容会同时显示出来

错误代码片段 #

<div class="row">
    <div class="card-header">
        <ul class="nav nav-tabs" id="specimen_tab" data-bs-tabs="tabs">
            {% for a_s in analyte_specimen %}
                <li class="nav-item">
                    <a class="nav-link{% if forloop.first %} active"
                       aria-current="true {% endif %}"
                       data-bs-toggle="tab"
                       href="#pane-{{ a_s.specimen.sg_id }}">{{ a_s.specimen.name }}</a>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content card-body" id="specimen_tabContent">
            {% for a_s in analyte_specimen %}
                <div class="tab-pane fade{% if forloop.first %} active{% endif %}"
                     id="pane-{{ a_s.specimen.sg_id }}">
                   <!-- Content here -->
                </div>
                ......

问题根源 #

1. 导航链接的HTML语法错误：nav-link的class属性在{% if %}判断里提前闭合了双引号，导致第一个标签的active类没有被正确识别，Bootstrap无法判定初始激活的标签。
2. 初始面板缺少show类：Bootstrap 5要求激活的tab-pane必须同时具备active和show类才能显示，只加active会导致初始状态下面板隐藏。

修复后的代码 #

<div class="row">
    <div class="card-header">
        <ul class="nav nav-tabs" id="specimen_tab" data-bs-tabs="tabs">
            {% for a_s in analyte_specimen %}
                <li class="nav-item">
                    <a class="nav-link{% if forloop.first %} active{% endif %}"
                       {% if forloop.first %}aria-current="true"{% endif %}
                       data-bs-toggle="tab"
                       href="#pane-{{ a_s.specimen.sg_id }}">{{ a_s.specimen.name }}</a>
                </li>
            {% endfor %}
        </ul>

        <div class="tab-content card-body" id="specimen_tabContent">
            {% for a_s in analyte_specimen %}
                <div class="tab-pane fade{% if forloop.first %} active show{% endif %}"
                     id="pane-{{ a_s.specimen.sg_id }}">
                   <!-- Content here -->
                </div>
                ......

修复说明 #

• 修正nav-link的class属性语法：把{% if %}判断里的引号移到闭合位置，确保active类被正确包含在class属性中，让Bootstrap能识别初始激活的标签。
• 给第一个tab-pane添加show类：满足Bootstrap 5的显示规则，解决初始状态下面板不显示的问题。

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