Question

我正在尝试过去几个小时，但一件简单的事情似乎并没有奏效。如您所知，Bootstrap在较小的屏幕上提供可折叠的导航栏。但是这个功能对我来说似乎没什么用。

以下是相关代码：

<div class="navbar navbar-inverse">
        <div class="container">

            <button class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>  
            <span class="icon-bar"></span>      
            </button>

            <button class="navbar-toggle pull-right btn-info" data-toggle="collapse" data-target="#navForm">
            Sign In/Sign Up
            </button>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navHeaderCollapse pull-left">
                    <li class="active"><a href="index.php">Home</a></li>
                    <li><a href="about-us.php">About Us</a></li>
                    <li><a href="contact-us.php">Contact Us</a></li>
                    <li><a href="privacy-policy.php">Privacy policy</a></li>
                    <li><a href="sitemap.php">Sitemap</a></li>
                    <li><a href="blog" target="_blank">Blog</a></li>
                </ul>

                <ul class="nav navbar-nav pull-right" id="navForm">
                  <li><a href="/users/sign_up">Sign Up</a></li>
                  <li class="divider-vertical"></li>
                  <li class="dropdown">
                    <a class="dropdown-toggle" href="#signin" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                    <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;" id="signin">
                        <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
                            <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
                            <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
                            <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
                            <label class="string optional" for="user_remember_me"> Remember me</label>
                            <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
                        </form>
                    </div>
                  </li>
                </ul>
            </div>  
        </div>
    </div>

jsfiddle是： http://jsfiddle.net/n94zL/

更新：我在Firefox开发工具中收到以下错误错误：Bootstrap的JavaScript需要jQuery

这意味着什么？

Answer 1

为了让导航栏正常工作，需要纠正一些错误：

1）一些Bootstrap元素/小部件使用jQuery库（实际上是一个JavaScript库）。因此，请确保包含jQuery库（bootstrap需要它）。

2）也需要bootstrap.js（或bootstrap.min.js）

3）您应该定位data-target="#navHeaderCollapse"（请注意#），因为它是id而不是class

对于jQuery库，您可以从here下载或链接到live .js文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意，上述行应在调用bootstrap.js之前出现

<强> Working Fiddle

Bootstrap折叠导航栏无法正常工作

1 个答案: