2013-10-08 85 views
0

我知道這似乎是人們常見的問題,我已經閱讀了儘可能多的關於此事的信息,但我錯過了一些東西。我將引導站點上的示例作爲模板進行了跟蹤,該站點具有響應性,並且可以像調整大小一樣進行調整。當它達到切換按鈕顯示的點時,我點擊並沒有任何反應。這是一個母版頁bootstrap 3導航欄切換不會顯示任何內容

頭HTML上:

<head runat="server"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> 
<link href="../Content/bootstrap.css" rel="stylesheet" /> 
<link href="../Content/Interior.css" rel="stylesheet" /> <!-- custom style sheet --> 
<link href="../Content/normalize.css" rel="stylesheet" /> 
</head> 

HTML:

<nav class="navbar navbar-default" role="navigation"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse"> 
         <span class="sr-only"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="#">Site Name</a> 
       </div> 

       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="#">Dash</a></li> 
         <li><a href="#">Edit Profile</a></li> 
         <li><a href="#">Invite</a></li> 
         <li><a href="#">Record A Message</a></li> 
         <li> 
          <p class="navbar-text">Connections <span class="badge">0</span></p> 
         </li> 
        </ul> 
        <ul class="nav navbar-nav navbar-right"> 
         <li> 
          <p class="navbar-text">Sign out as <a class="navbar-link" href="Login.aspx">User</a></p> 
         </li> 
        </ul> 
       </div> 
      </nav> 
... 
<script src="../Scripts/jquery-2.0.3.min.js"></script> 
    <script src="../Scripts/bootstrap.js"></script> 
</body> 
</html> 

我會很感激對此事的任何想法。

回答

2

你只需要在這條線增加了一個句號:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

(最後決定將這個一起弄明白:http://jsfiddle.net/VDcnr/

雖然我會建議放置一個自定義類有對於最後在同一頁面上有兩個導航欄的奇怪角落案例。

另外,作爲旁註,我很確定normalize.css包含在bootstrap中,因此您不需要再包含它。

+1

就在我讀你的第一行時,我知道我留下了什麼。哎呀。那裏好眼睛。 –

相關問題