2015-08-18 139 views
0

我正在網頁頂部使用引導程序導航欄。與許多Bootstrap導航欄非常相似,當頁面達到一定長度時,這個特定頁面崩潰,所有標題都會進入頁面右上角的按鈕。問題是,單擊按鈕時,導航欄不顯示標題。HTML/CSS:引導程序導航欄不響應

這裏有一個問題:特別是在這一頁上,只有這一頁,欄不起作用。事實上,按鈕似乎變灰了。

(我將提供圖像,但#1並不讓我的地方鏈接,因爲我是新用戶)

我試圖從這個頁面其它頁面替換導航欄 - 不工作。

我試圖從其他頁面替換該導航欄用導航欄 - 工作完全正常。

這讓我相信在這個頁面上還有其他的東西會導致Navbar被「禁用」,或者導致它不被顯示,比如缺少標籤。我已經完成了我的代碼的搜索並找不到它。

正如我之前所說的,問題在於,它只在特定的一頁上;沒有其他人。鑑於有人願意通過我的源代碼進行搜索,我已經在下面提供了一些源代碼來查找語法錯誤。

另外,請注意,我在我的代碼中添加了一個燈箱照片庫,並且已將外部鏈接和腳本放在底部。

<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> 
+0

你調用在頭2個不同的引導CSS版本和你有兩個jQuery的頁腳調用。開始刪除額外的東西,看看會發生什麼。 – vanburen

回答

1

我認爲你缺少引導javascript庫?

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