Bootstrap nav-tab 没有在视觉上正确传达 "active" 状态

Question

我可以单击我的选项卡，并且我的选项卡内容显示如我所料，但我的“活动”导航选项卡显示不正确，我不确定如何解决该问题。请参阅下面的图片以供参考。

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>

Answer 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>

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

Bootstrap nav-tab 没有在视觉上正确传达 "active" 状态

Bootstrap nav-tab not conveying visually "active" state correctly

tabs

nav

bootstrap-5