Question

我想在bootstrap中创建一个导航栏

除了一个以外，一切正常。当我将浏览器的大小调整为移动宽度并单击切换按钮时，下拉菜单无法打开。

请帮帮我。我想要的只是＆＃34;当我点击堆叠的toggel按钮时，我希望下拉打开＆＃34;。

我还对按钮的data-toggle属性中的类和id进行了更改。

我已经包含了jquery，bootstrap js和bootstrap css。我在下面显示了整个代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sellr Buyr</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="keywords1, change later">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
        <!-- stylesheets and js paths must be updated later -->

        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
        <script src="_sources/bootstrap/js/bootstrap.js"></script>
    </head>
    <body>

        <header>
           <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container"><!--fluid container-->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 class="navbar-header"><!--nav-header-->
                    <a class="navbar-brand" href="homepage">$ SellrBuyr</a>
                    </div><!--/nav-header-->
                    <div class="collapse navbar-collapse"><!--main-nav-collapse-->
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#">LOGIN<i class="caret"></i></a></li>
                    <li class="dropdown"><a href="#">REGISTER<i class="caret"></i></a></li>
                    <li class="btn-danger"><a href="#">PUBLISH YOUR AD FOR FREE</a></li>
                    </ul>
                    </div><!--/main-nav-collapse-->
                </div><!--/fluid container-->
            </nav>
        </header>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

    </body>
</html>

Answer 1

尝试使用以下代码来包含jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

已更新：

您确定正确链接了bootstrap js文件吗？

删除bootstrap js，尝试在</body>之前和jQuery库之后添加它们。下面是正确的代码（希望:)）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Sellr Buyr</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="keywords1, change later">

        <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
        <!-- stylesheets and js paths must be updated later -->

        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="_sources/bootstrap/css/bootstrap-theme.css">
    </head>
    <body>

        <header>
           <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container"><!--fluid container-->
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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 class="navbar-header"><!--nav-header-->
                    <a class="navbar-brand" href="homepage">$ SellrBuyr</a>
                    </div><!--/nav-header-->
                    <div class="collapse navbar-collapse"><!--main-nav-collapse-->
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown"><a href="#">LOGIN<i class="caret"></i></a></li>
                    <li class="dropdown"><a href="#">REGISTER<i class="caret"></i></a></li>
                    <li class="btn-danger"><a href="#">PUBLISH YOUR AD FOR FREE</a></li>
                    </ul>
                    </div><!--/main-nav-collapse-->
                </div><!--/fluid container-->
            </nav>
        </header>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="_sources/bootstrap/js/bootstrap.js"></script>
        <script src="js/vendor/modernizr-2.7.1.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>

    </body>
</html>

单击或触摸移动按钮时，无法打开Bootstrap切换按钮

1 个答案: