python - 如何在 Bootstrap5 导航选项卡中正确制作 Django 模板？

Question

嗨，我是 stackoverflow 的新手。我需要一些帮助以使 Django 模板正确显示在 Bootstrap5 导航选项卡中。

我在 Bootstrap5 导航选项卡中嵌入了 Django HTML 模板，如下所示，但是当我渲染页面时它没有出现。我希望每个选项卡都包含 Django 动态生成的 HTML 并正确显示它们。

有没有人有想法使这项工作？任何帮助将不胜感激。谢谢！

        <div class="container">
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab"
                        aria-controls="nav-home" aria-selected="true">Abstract</a>
                    <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab"
                        aria-controls="nav-profile" aria-selected="false">Questions</a>
                    <a class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" href="#nav-contact" role="tab"
                        aria-controls="nav-contact" aria-selected="false">FAQ</a>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                ...
                </div>
                
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="mb-3">
                    {% for item in question_list %}
                     {{ item.question_id }}
                    {% endfor %}
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
            </div>
        </div>

标签： pythonhtmlcssdjangobootstrap-5