不能在 django 模板中使用多个引导模式答案

【问题标题】：Can´t use multiple bootstrap modals in django template不能在 django 模板中使用多个引导模式
【发布时间】：2019-09-03 04:52:49
【问题描述】：

我正在编写一个模板视图，我需要在该视图上打开几个不同的模式 - 总是一次只打开一个。此模板具有选项卡，模式的触发按钮位于选项卡导航和选项卡内容之间。我之前在不同的视图中使用了多个这样的模式，除了标签导航之外，它使用完全相同的代码，它的工作方式与预期的一样。但在这个模板中，我的模态 div 嵌套在一起，因此数据切换不起作用。我确定我错过了一些东西，但我不知道是什么

我试图将模式放在包含的 html (noteTable.html) 的末尾以分隔模式，但这会破坏我的标签导航 - 每个标签中的所有内容都显示在每个标签中

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newKNAModal">Kosten-Nutzen-Analyse</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#newNote"><i class="fas fa-plus"></i> Neue Notiz</button>

<div class="tab-content">
    <div class="tab-pane active" id="details" role="tabpanel">
       {% include 'detailForm.html' %}
    </div>
    <div class="tab-pane" id="notes" role="tabpanel">
       {% include 'noteTable.html' %}
    </div>
    <div class="tab-pane" id="dokumente" role="tabpanel">
       {% include 'documentTable.html' %}
    </div>
</div>

<!-- New KNA Modal -->
<div class="modal fade bs-example-modal-lg" id="newKNAModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog  modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-body">
                {% include 'newKNA.html' %}
            </div>
        </div>
    </div>
</div>
<!-- New Notes Modal -->
<div class="modal fade bs-example-modal-lg" id="newNote" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog  modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-body">
                {% include 'newNote.html' %}
            </div>
        </div>
    </div>
</div>

我希望如果我单击按钮，右侧的模态会打开。但是只有第一个打开，第二个只有淡入淡出动画但没有显示 html

【问题讨论】：

标签： html django bootstrap-4 bootstrap-modal

【解决方案1】：

最后，我发现了错误所在。它不在我的模板代码中，也不是模态的启动。它只是我的一个模态内容中缺少的</div> - 我在{% include 'newKNA.html' %} 中包含的那个。这样，浏览器将所有<div> 嵌套在第一个中。

【讨论】：