引导导航选项卡无法正确直观地传达"active"状态

Question

我可以点击我的选项卡，我的选项卡内容显示如我所愿，但我的"活动"导航选项卡不能正常显示，我不知道如何解决这个问题。参考下图

我的导航菜单

最左边的标签是"active"但是导航菜单显示了"活动"下面的行。标签输送不活跃?下面是Bootstrap的示例进行比较。

引导导航菜单

我正在通过循环数据动态创建我的nav-tabs，它最近才开始表现不同。这是Javascript问题还是Bootstrap组件?

<ul class="nav nav-tabs" id="network-navigation-tabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link network-tab all-networks active" id="all-networks-  tab" data-bs-toggle="tab" data-bs-target="#all-networks" type="button" role="tab" aria-selected="true">
All Networks
<br><br>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link network-tab lan" id="lan1-tab" data-bs-toggle="tab" data-bs-target="#lan1" type="button" role="tab" aria-selected="false">
Local Area Network
<div>
...
</div>                    
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link network-tab transport" id="transport-tab" data-bs-toggle="tab" data-bs-target="#transport" type="button" role="tab" aria-selected="false">
Transport
<br><br>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link network-tab loopback" id="loopback-tab" data-bs-toggle="tab" data-bs-target="#loopback" type="button" role="tab" aria-selected="false">
Loopback
<br><br>
</button>
</li>
</ul>

Answer 1

我已经解决了这个问题，尽管我不确定HTML代码的一部分如何影响它。

我的问题是我在页面上早些时候显示的动态列表导致nav选项卡不能正确显示。虽然HTML代码看起来是正确的，但我将HTML从使用div标签修改为使用ul &李标签。

老方法

{begin forloop}
<div>
<a href=#>
...
</a>
</div>
{end forloop}

新方法

<ul>
{begin forloop}
<li>
<a href=#>
...
</a>
</li>
{end forloop}
</ul>

任何见解，为什么这使我的导航选项卡正常运行，将不胜感激!