Bootstrap 3.2 Navbar不会因jquery.min.map错误而崩溃

时间:2014-10-26 20:34:32

标签: javascript jquery twitter-bootstrap-3

我第一次使用Bootstrap而且我的导航栏没有崩溃。因此,在回复this question on SO时,我检查了jqueryBootstrap js文件的顺序及其确定。 当我选中网络标签以检查是否所有资源都正确加载时,我收到jquery.min.map错误,表示无法加载。

由于这个丢失的文件以及为什么Bootstrap要求提供此文件,我的问题是否相关?

这是图片: enter image description here 当我进一步减小屏幕宽度时,链接和搜索消失,扩展按钮也不会出现。

以下是navbar的参考代码

<div class="container" id="main">
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
            </div>

                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">About Us</a>
                        </li>
                        <li>
                            <a href="#">FAQ</a>
                        </li>
                        <li class="dropdown">
                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Founders <span class="caret"></span></a>
                                  <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Naveen</a></li>
                                    <li><a href="#">Sumit</a></li>
                                    <li><a href="#">Sanjeev</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">Naveen</a></li>
                                  </ul>
                        </li>
                    </ul>
                    <form class="navbar-form pull-left" role="search">
                        <div class="form-group">
                                  <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                    </form>
                    <ul class="nav navar-nav pull-right">
                        <li>
                            <a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a> 
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
</div>

1 个答案:

答案 0 :(得分:2)

您在navbar-header下省略了部分导航html:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

这是jsFiddle