Bootstrap 导航选项卡未正确传达视觉上的“活动”状态答案

【问题标题】：Bootstrap nav-tab not conveying visually "active" state correctlyBootstrap 导航选项卡未正确传达视觉上的“活动”状态
【发布时间】：2021-10-04 15:25:19
【问题描述】：

我可以单击我的选项卡，我的选项卡内容按预期显示，但我的“活动”导航选项卡显示不正确，我不知道如何解决问题。请参阅下面的图片以供参考。

My Nav-menu

最左边的选项卡是“活动的”，但导航菜单显示“活动”选项卡下方的行表示它不活动？下面是 Bootstrap 的示例进行比较。

Bootstrap Nav-menu

我正在通过循环数据来动态创建导航选项卡，它最近才开始表现不同。这是 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>

【问题讨论】：

标签： tabs nav bootstrap-5

【解决方案1】：

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

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

旧方法

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

新方法

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

任何关于为什么使我的导航标签正常运行的见解将不胜感激！

【讨论】：