Bootstrap 导航栏折叠不起作用

Question

我在网站上工作，我不明白为什么我的导航栏不会折叠。似乎当 window 变得足够小时，导航栏消失了，但按钮没有出现。这是代码：

<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<html lang="en">
    <head>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE-edge"><!--latest IE-->
        <meta name="description" content="">
        <meta name="author" content="">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="JS/bootstrap.js"></script>
        <title></title>
        <!--========================icons=================================-->
        <link href="" type="image/x-icon" rel="icon" ><!--16x16--><!--put favicon.ico in root-->
        <link rel="apple-touch-icon" href="" >
        <!--**use when shitty phones are needed to be supported**
            <meta name="handheldfriendly" content="true">
            <meta name="mobileoptimized" content="240">
        -->
        <link type="style/css" rel="stylesheet" href="CSS/bootstrap.css">

    </head>
    <body>
        <div class="container-fluid">
            <header class="page-header clearfix">
                    <div class="navbar-header">
                        <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target = ".bs-navbar-collapse">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <nav class="collapse navbar-collapse bs-navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="#">Work</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">News</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                    </nav>
            </header>

        </div>
    </body>
</html>

我知道 boostrap.js 文件的文件路径是正确的。我究竟做错了什么？我错过了什么吗？谢谢！

Answer 1

您目前看不到您的图标栏，因为它们是白色的。这是您的代码的快速 mod，将条形图涂成红色 - 表明它们在工作。

<!DOCTYPE html>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<html lang="en">
    <head>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE-edge"><!--latest IE-->
        <meta name="description" content="">
        <meta name="author" content="">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <title></title>
        <!--========================icons=================================-->
        <link href="" type="image/x-icon" rel="icon" ><!--16x16--><!--put favicon.ico in root-->
        <link rel="apple-touch-icon" href="" >
        <!--**use when shitty phones are needed to be supported**
            <meta name="handheldfriendly" content="true">
            <meta name="mobileoptimized" content="240">
        -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <style>
           .icon-bar {
             background: red;
             }
      </style>
    </head>
    <body>
        <div class="container-fluid">
            <header class="page-header clearfix">
                    <div class="navbar-header">
                        <button class="navbar-toggle collapsed dropdown-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <nav class="collapse navbar-collapse bs-navbar-collapse">
                            <ul class="nav navbar-nav">
                                <li><a href="#">Work</a></li>
                                <li><a href="#">Services</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">News</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                    </nav>
            </header>

        </div>
    </body>
</html>

Bootstrap 导航栏折叠不起作用

Bootstrap navbar collapse not working

css

jquery

twitter-bootstrap

twitter-bootstrap-3