Bootstrap折叠导航栏

时间:2017-01-10 16:02:39

标签: twitter-bootstrap

我在我的网站上用引导程序编写了一个简单的可折叠导航栏,但是不明白为什么在实时版本崩溃后它无效。如果我复制/粘贴代码,例如,w3school尝试它的网站代码工作。不明白它有什么问题,有什么帮助吗?

Live version

链接到w3school尝试使用类似工具栏的编辑器 w3school try it

这是代码:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button data-target="#cotliNavbar" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
        </button>
        <a href="index.php" class="navbar-brand">Crusaders of the Lost Idols fansite</a>
    </div>
    <div id="cotliNavbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.php">Home</a></li>
        <li><a href="missions">Missions</a></li>
        <li><a href="crusaders">Crusaders</a></li>
        <li><a href="recommendation">Recommendation</a></li>
        <li><a href="hints">Hints</a></li>
    </ul><ul class="nav navbar-nav navbar-right">
        <li><a href="user"><span class="glyphicon glyphicon-user"></span> taised</a></li>
        <li><a href="logout"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
    </ul>     </div>
    </div>
</nav>

使用bootstrap 3.3.7和jquery 1.9.0

编辑:链接的问题是关于jquery和bootstrap的顺序,事实并非如此,在我的情况下,它是一个缺少的js和一个错误的jquery版本

1 个答案:

答案 0 :(得分:0)

我在代码中的任何地方都没有看到您包含bootstrap.js文件的位置。您需要在jquery之后包含该文件以允许折叠正常工作:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

有关bootstrap入门的更多信息,请查看他们的文档: http://getbootstrap.com/getting-started/