我正在網頁頂部使用引導程序導航欄。與許多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">
© <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>
你調用在頭2個不同的引導CSS版本和你有兩個jQuery的頁腳調用。開始刪除額外的東西,看看會發生什麼。 – vanburen