BootStrap Navbar崩潰問題

我註釋掉了代碼的其餘部分，看它是否是導致問題的外部元素，它們不是。 jQuery鏈接，BootStrap也是如此。該按鈕顯示，但摺疊功能不起作用。也許這只是我的眼睛，我拼寫錯誤，但這段代碼有什麼問題？BootStrap Navbar崩潰問題

<div class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 
<div class="navbar-brand"> 
    <a href="#about"> 
    <span class="glyphicon glyphicon-lamp"></span>Tommy Mertell 
    </a> 
</div> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="glyphicon glyphicon-lamp" style="color:white;"></span> 
    </button> 
<div class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
    <li><a href="#home" class="active">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#port">Portfolio</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
    </div> 
    </div> 
    </div>

來源

2015-12-10 Tommy Mertell

我們可以看到頁面的小提琴/筆嗎？看到JavaScript以及它如何與HTML交互是至關重要的。 –

我評論了所有內容，唯一沒有評論的是你在這裏看到的代碼，它不能正常工作。 –

看到JS仍然很重要：它可能是導致問題的原因。 – Tugzrida

打開控制檯，並確保你沒有在頁面上的任何錯誤。我複製了你的代碼，並把它放在一個Bootstrap和jQuery的頁面上，它對我很有用。雖然你應該改變結構，因爲有一些水平滾動條。我會把你的品牌和你的導航欄切換按鈕放在一個帶有類navbar-header的div中。

來源

2015-12-10 20:08:52 Frank

由於某些奇怪的原因，添加「標題部分」你能告訴我爲什麼嗎？ –

@Tommy Mertell在我的回答中解釋你的問題。 –

Here is a fiddle with your updated pen。

您沒有結束您的評論。

你開始評論...

<!--

但是你沒有添加結束註釋行。

-->

因此，jQuery和Bootstrap不會在頁面的末尾加載。

來源

2015-12-10 20:15:47

是的，我注意到這一次，我通過代碼搜索，但弗蘭克的答案是爲我解決它。即使我更正了HTML註釋，但直到添加了navbar-header的包含類時才正常工作。不過謝謝你指出。 :) –

你會注意到我在這裏發佈的筆，它的工作原理，並沒有'navbar-header'類。 –

我知道，但由於一些奇怪的原因，即使在我更正了HTML註釋之後，我仍然無法正常工作。也許它是越野車？ –

你可以嘗試替換腳本和鏈接標籤引導和jQuery，並把這些（按照相同的順序）。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" /> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

也許是與版本或您加載腳本/ css的順序有關。

希望有幫助！

來源

2015-12-10 20:21:45 Manuel

BootStrap Navbar崩潰問題

回答

相關問題