Question

我很难理解为什么我的响应式导航栏折叠按钮不会扩展。在这种情况下，我的网页是搜索结果页面。

http://uforest.org/search.php?user_query=test

当搜索结果为空（上图）时，导航栏折叠将不会打开。

http://uforest.org/search.php?user_query=mango

然而，当搜索结果给出至少一个结果时，例如在上面的网址中，可以展开导航栏折叠按钮。

有谁知道为什么会这样？

在我的导航栏代码下面，我使用的所有其他页面都没有问题。

  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" 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>
                <a class="navbar-brand" href="index.php">Urban Forest</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="about.php">About</a>
                    </li>
                    <li>
                        <a href="recent_post.php">Plant Index</a>
                    </li>
                    <li>
                        <a href="http://uforest.blogspot.com" target="_blank">Blog</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Answer 1

我检查了你的两个链接。

"http://uforest.org/search.php?user_query=test"中的

您不包括bootstrap.min.js

您可以在此处查看： view-source：http://uforest.org/search.php?user_query=test

实际上，您缺少以下文件

 <!-- jQuery -->

<script src="/js/jquery.js"></script>

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

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

他们已经在观看源：http://uforest.org/search.php?user_query=mango

只需包含它就可以了。

玩得开心

搜索结果为空时，Boostrap Navbar折叠无法展开

1 个答案: