Question

我正在网站上工作，我无法弄清楚为什么我的导航栏不会崩溃。似乎当窗口变得足够小时导航栏就会消失，但按钮不会显示出来。这是代码：

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

您目前无法看到自己的图标栏，因为它们是白色的。这是你的代码的快速模式，将条纹颜色变为红色 - 显示它们正常工作。

<!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导航栏崩溃无法正常工作

1 个答案: