Bootstrap導航標籤和活動鏈接

Question

我正面臨着bootstrap4導航欄和活動標籤的問題。標籤和內容在點擊時不活躍，但是當我通過將活動類放置在他們正在工作的每個標籤上而獨立調用它們時，該標籤和內容不活躍。

<div class="row"> 
 
    <div class= "col"> 
 
     <h2>Super world Leadership</h2> 
 
     <ul class="nav nav-tabs"> 
 
      <li class="nav-item"> 
 
       <a class="nav-link active" href="#ironman" 
 
       role="tab" data-toggle="tab">iron man, CEO</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#spiderman" role="tab" 
 
       data-toggle="tab">spiderman, CFO</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#batman"role="tab" 
 
       data-toggle="tab">batman, CTO</a> 
 
      </li> 
 
      <li class="nav-item"> 
 
       <a class="nav-link" href="#hulk" role="tab" 
 
       data-toggle="tab">hulk, Exec. Chef</a> 
 
      </li> 
 
     </ul> 
 

 
     <div class="tab-content"> 
 
      
 
      <div role="tabpanel" class="tab-pane fade show active" id="ironman"> 
 
       <h3>iron man <small>Chief Epicurious Officer</small></h3> 
 
       <p class="hidden-xs-down">Our CEO, ironman</p> 
 
      </div> 
 
      
 
      <div role="tabpanel" class="tab-pane fade" id="spiderman"> 
 
       <h3>spiderman <small>Chief Food Officer</small></h3> 
 
       <p class="hidden-xs-down">Our CFO, spiderman, </p> 
 
      </div> 
 
      
 
      <div role="tabpanel" class="tab-pane fade" id="batman"> 
 
       <h3>batman <small>Chief Taste Officer</small></h3> 
 
       <p class="hidden-xs-down">CTO </p> 
 
      </div> 
 
      
 
      <div role="tabpanel" class="tab-pane fade" id="hulk"> 
 
       <h3>hulk<small>Executive Chef</small></h3> 
 
       <p class="hidden-xs-down">Award winning </p> 
 
      </div> 
 
     
 
     </div> 
 
    
 
    </div> 
 
</div>

可以在這裏有一個人指導。

Answer 1

您錯過了實際觸發選項卡的部分。您要麼需要javascript或使用數據切換屬性。

看看這裏的一些細節：

https://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior