HTML / CSS：Bootstrap导航栏没有响应

时间：2015-08-18 21:21:42

标签： html css twitter-bootstrap navbar nav

我正在使用网页顶部的Bootstrap导航栏。就像许多Bootstrap Navbars一样，当页面达到一定长度时，这个特殊的一个会折叠，并且所有标题都会进入页面右上角的按钮。问题是，单击按钮时，导航栏不会显示标题。

这就是问题所在：特别是在这一页上，只有这一页，该栏不起作用。事实上，按钮似乎是灰色的。

（我会提供图片，但Stackoverflow不允许我放置链接，因为我是新用户）

我尝试用此页面从其他页面替换Navbars - 不起作用。

和

我尝试用其他页面中的Navbars替换此Navbar - 工作得很好。

这让我相信此页面上还有其他东西可以让Navbar成为＆＃34;禁用＆＃34;或者有些东西导致它没有显示，例如缺少标签。我已完成对代码的完整搜索，但无法找到它。

正如我之前所说，问题是，它只在一页上;没人。鉴于有人愿意搜索我的源代码，我在下面提供了一些源代码来查找语法中的错误。

另外，请注意我在我的代码中包含了一个Lightbox照片库，并在底部放置了外部链接和脚本。 

<head> <!--HEAD START-->
    <meta name="description" content="Description"/>
    <meta name="keyword" content="keyword"/>
    <meta name="robots" content="index, follow"/>
    <link rel="icon" href="img/icon.jpg"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css">
    <link rel="stylesheet" href="css/stylesheet.css">
    <link rel="stylesheet" href="css/lightbox.css">
    <script language="JavaScript" rel="text/javascript" src="js/logic.js"></script>
    <title> Title </title>
</head><!--HEAD END-->

<body><!--BODY START-->
    <noscript>
        Please enable JavaScript to view this page's content
    </noscript>
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <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.html">Navbar Title</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="news.html">News</a></li>
                        <li><a href="theassociation.html">The Association</a></li>
                        <li class="active"><a href="#">Photo Gallery </a></li>
                        <li><a href="about.html">About</a></li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </nav>
        <div id="container"><!--CONTAINER START-->
            <div class="jumbotron"><!--JUMBOTRON START-->
                <h1> Title </h1>
                <h6> Lorem ipsum dolar sit amat </h6>
            </div><!--JUMBOTRON END-->
     </div><!--CONTAINER END-->
    <hr/>
    <div class="page-header" id="heading2">
        <h2> Photo Gallery <br/> <small class="style"> See pictures from the 2015-2016 Season </small></h2>
    </div>
    <div class="container">
        <hr/>
        <div class="gallery">
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    <a href="img/IMG_7561.jpg" class="photoData" data-title="..." data-lightbox="..."><img src="img/IMG_7561.jpg" class="img-thumbnail" width="200px"></a>
                </div>
            </div>
            <div class="row">
                <hr/>
            </div>
        </div>
    </div>

        <footer class="footer"><!--FOOTER START-->

            <div class="container">
                <p class="text-muted">
                    &copy; <script> writeDate(); </script>, All rights reserved.
                </p>
            </div>
        </footer><!--FOOTER END-->

<!-- SCRIPTS MUST BE PLACED AT THE BOTTOM OF THE PAGE FOR PROPER EXECUTION OF ELEMENTS-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script language="JavaScript" rel="text/javascript" src="js/lightbox.js"></script>
</body><!--BODY END-->
</html>

1 个答案:

答案 0 :(得分：1)

我认为你错过了bootstrap javascript库？

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

相关问题
最新问题