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导航选项卡无法正常工作

回答

相关问题