Jquery 引导导航选项卡工作不正常_Jquery_Html_Twitter Bootstrap

Jquery 引导导航选项卡工作不正常

jquery html twitter-bootstrap

Jquery 引导导航选项卡工作不正常,jquery,html,twitter-bootstrap,Jquery,Html,Twitter Bootstrap,我的导航标签坏了，尽管我检查了1000次密码。div-col标签之间还有其他代码，但这不会有任何区别 <ul class="nav nav-tabs" role="tablist" data-tabs="tabs"> <li class="active"><a href="#coursera" data-toggle="tab">Coursera</a></li> <

我的导航标签坏了，尽管我检查了1000次密码。div-col标签之间还有其他代码，但这不会有任何区别

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


引导盒
带下拉菜单的选项卡





col-sm-10级的coursera选项卡分区
col-sm-2类的coursera选项卡分区
具有col-sm-10类的研究选项卡Div
具有col-sm-2类的研究选项卡Div
具有col-sm-10类的博客选项卡Div
具有col-sm-2类的博客选项卡Div

谢谢您的回答！我终于找到了原因

显然，标签下面的标题是问题所在。在我的自定义css中，我的标题有padding top:100px和margin top:-100px。每当我移除这些标签时，标签都会工作。我想我应该找到另一种方法来设置锚。

您在开发人员控制台中看到任何错误吗？另外，试着把这些脚本放到

中，看看它们是否被选中，因为你的html是有效的：谢谢你的回答！我在控制台中没有看到任何错误，而且将脚本放在头部似乎不起作用：（事实证明，我的选项卡窗格中的col-sm类确实很重要。当我用其他文本替换它们时，选项卡工作正常。每当我重新引入col类时，选项卡都不会工作。我非常确定col类是合法代码，因为我在其他地方使用它们，它们工作正常。难道不可能在选项卡窗格中使用引导网格系统吗您是否遇到过类似的问题？

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