2016-08-26 43 views
0

所以我剛開始在我的投資組合頁面上工作(第二個項目很溫和),一切都很順利,直到我嘗試使用摺疊按鈕來顯示指向我網頁其他部分的鏈接。Navbar Collapse按鈕將不會擴展

這裏是有問題的代碼:

<body> 
<div class="row"> 
<div class="col-md-12"> 
    <div class="container"> 
    <nav class="navbar navbar-inverse navbar-fixed-top"> 
     <a href="#" class="navbar-brand Logo" id="Logo"> 
     StruckCroissant 
    </a> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navHeaderCollapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right" id="Nav-List"> 
      <li><a href="#">About Me</a></li> 
      <li><a href="#">Projects</a></li> 
      <li><a href="#">Contact Me</a></li> 
     </ul> 
     </div> 
    </nav> 
    </div> 
</div> 

然後這裏是自定義CSS我使用:

.Logo{ 
 
    font-size:20px; 
 
    color:white; 
 
    font-family:Monospace; 
 
    -webkit-transition:all ease 0.2s; 
 
    -moz-transition:all ease 0.2s; 
 
    -o-transition:all ease 0.2s; 
 
    transition:all ease 0.2s; 
 
} 
 

 
#Logo:hover{ 
 
    font-size:20px; 
 
    color:green; 
 
    font-family:Monospace; 
 
    background-color:white; 
 
    border-color:white 
 
} 
 

 
#Nav-List{ 
 
    padding-right:30px; 
 
}

主要是我的問題得到了butto n來展開並實際顯示列表中的項目,但目前它只是響應點擊而變得更加明亮。

任何幫助表示讚賞!先謝謝你!

回答

0

我有一個類似的問題。多次查看了html,並確定它是正確的。然後我開始玩jquery和bootstrap javascript的命令。

本來我在bootstrap.min.js加載jquery.min.js之前。在這種狀態下,點擊菜單圖標時菜單不會展開。

然後我改變了順序,以便bootstrap.min.js在jquery.min.js之後,這解決了問題。我不太瞭解JavaScript,以解釋爲什麼這會導致問題(或解決問題),但這對我來說很有用。

附加信息:

兩個腳本都位於頁面底部,緊鄰標記之前。這兩個腳本都託管在CDN上,而非本地託管。

如果你確定你的代碼是正確的,試試這個。

如果這不能解決您的問題,請按照下列步驟操作:

1 - 安置自己的Plunker或小提琴這裏
2 - 嘗試使用此代碼段用於導航欄崩潰樣品,而不是你的,你自己風格

<div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
       <button id="loginbutton" type="button" class="btn btn-primary narbar-btn"><i class="glyphicon glyphicon-log-in"></i>Login</button> 
       <button type="button" class="btn btn-success navbar-btn"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button> 
       </ul> 
</div>