Bootstrap導航選項卡無法正常工作

我的導航選項卡不工作，雖然我檢查了1000 thimes的代碼。 div col標籤之間還有其他代碼，但這不應該有任何區別。Bootstrap導航選項卡無法正常工作

 <ul class="nav nav-tabs" role="tablist" data-tabs="tabs"> 
      <li class="active"><a href="#coursera" data-toggle="tab">Coursera</a></li> 
      <li><a href="#research" data-toggle="tab">Research</a></li> 
      <li><a href="#blog" data-toggle="tab">Blog</a></li> 
     </ul> 

     <div class="tab-content"> 

      <div class="tab-pane fade in active" id="coursera"> 
       <div class="col-sm-10"></div> 
       <div class="col-sm-2"></div> 
      </div> 

      <div class="tab-pane fade" id="research"> 
       <div class="col-sm-10"></div> 
       <div class="col-sm-2"></div> 
      </div> 

      <div class="tab-pane fade" id="blog"> 
       <div class="col-sm-10"></div> 
       <div class="col-sm-2"></div> 
      </div> 
     </div>

來源

2016-02-27 Desiré De Waele

您是否在開發人員控制檯中看到任何錯誤？另外，請嘗試將這些腳本放在''中，看看它們是否被拾取 –

做一個小提琴，因爲你的html工作：https://jsbin.com/vutexubedu/1/edit?html,output –

感謝您的答案！我在控制檯中看到沒有錯誤，並且將我的腳本放在頭上似乎不起作用:( –

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>Bootstrap Case</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 
    <body>   
     <div class="container"> 
      <h3>Tabs With Dropdown Menu</h3> 
      <ul class="nav nav-tabs" role="tablist" data-tabs="tabs"> 
       <li class="active"><a href="#coursera" data-toggle="tab">Coursera</a></li> 
       <li><a href="#research" data-toggle="tab">Research</a></li> 
       <li><a href="#blog" data-toggle="tab">Blog</a></li> 
      </ul>    
      <div class="tab-content">     
       <div class="tab-pane fade in active" id="coursera"> 
        <div class="col-sm-10"> coursera tab Div with class col-sm-10</div> 
        <div class="col-sm-2">coursera tab Div with class col-sm-2</div> 
       </div> 

       <div class="tab-pane fade" id="research"> 
        <div class="col-sm-10"> research tab Div with class col-sm-10</div> 
        <div class="col-sm-2">research tab Div with class col-sm-2</div> 
       </div> 

       <div class="tab-pane fade" id="blog"> 
        <div class="col-sm-10"> blog tab Div with class col-sm-10</div> 
        <div class="col-sm-2">blog tab Div with class col-sm-2</div> 
       </div> 
      </div> 
     </div>   
    </body> 
</html>

來源

2016-02-28 13:49:44

感謝您的答案！我終於找到原因...

顯然標籤下面的標題是問題。我在我的自定義CSS中使用了padding-top：100px和margin-top：-100px。每當我刪除這些，標籤正在工作。我想我應該找到另一種方法來設置我的錨點。

來源

2016-02-28 22:57:18

Bootstrap導航選項卡無法正常工作

回答

相關問題