Bootstrap菜单不会掉线或折叠

时间:2013-12-12 13:02:13

标签: javascript jquery html css twitter-bootstrap

我目前正在构建一个视差引导主题。我无法理解什么阻止菜单下降和屏幕调整大小时菜单崩溃。

以前有人有这个问题吗?我已经尝试切换样式表的位置,包括页脚中的js文件但不成功。有没有人在这里看到问题只是形成html?

<!DOCTYPE html>
<meta charset="UTF-8">

<html lang="en">

<head>
    <title>Title</title>

        <!-- Global Attributes -->
        <link rel="icon" href="img/favicon.ico">
        <!--[if IE]><link rel="SHORTCUT ICON" href="img/favicon.ico"/><![endif]-->

        <!-- Required Parralax JavaScript -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="js/jquery.stellar.min.js"></script>
        <script type="text/javascript" src="js/waypoints.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        <script src="js/bootstrap.js"></script> 


        <!-- Required Styles for theme -->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

</head>

<body>

<header>
        <div class="navbar navbar-default navbar-fixed-top">
                <div class="container">
                        <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                </button>
                                <a href="index.html" class="navbar-brand"><img src="img/logo.png"></a>
                        </div>


                        <div class="navbar-collapse collapse">
                                <ul class="menu nav navbar-nav pull-right">
                                        <li class="dropdown">
                                                <a href="#" class="dropdown-toggle hover1" data-toggle="dropdown">Cat 1<b class="caret"></b></a>
                                                <ul class="dropdown-menu">
                                                        <li><a href="#">Sub Cat 1</a></li>
                                                        <li><a href="#">Sub Cat 2</a></li>
                                                        <li><a href="#">Sub Cat 3</a></li>
                                                        <li><a href="#">Sub Cat 3</a></li>
                                                </ul>
                                        </li>


                        </div> 
                </div>
        </div>
</header>

1 个答案:

答案 0 :(得分:0)

你的专栏:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

应该是

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">