2015-10-12 72 views
0

我剛開始這個項目,但我無法得到正確的導航欄。閱讀堆棧中的每一個相同的問題,但我無法弄清楚。試用了jQuery,並且現在大約100次地屏蔽了我的代碼。我的引導程序3響應式導航欄不會摺疊。

<title>Dit is Bas</title> 

<meta name "viewport" content="width=device-width, initial-scale=1.0"> 

<link type="text/css" rel="stylesheet" href="stylesheet.css"/> 
<link type="css/bootstrap.min" rel="stylesheet" href="css/bootstrap.min.css"> 

<script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
<script type="text/javascript" src="javascript/bootstrap.js"></script> 


</head> 
<body> 
    <header> 
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="collapse navbar-collapse"> 
        <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">Bas</a> 
       </div> 

       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#">Photo's</a></li> 
         <li><a href="#">About Bas</a></li> 
         <li><a href="#">Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </header> 
</body> 

希望有人會看到這個問題。

在此先感謝!

回答

1

問題出在data-target="collapse navbar-collapse"應該是iddiv有菜單項。對於在Bootstrap中工作的轉換,您需要在bootstrap.js之前使用jquery.js。

你應該有這樣的東西有工作的導航欄。

<nav class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#important-id-for-collapsing" aria-expanded="false"> 
       <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="#">Brand</a> 
     </div> 
     <div class="collapse navbar-collapse" id="important-id-for-collapsing"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Link #1</a></li> 
       <li><a href="#">Link #2</a></li> 
       <li><a href="#">Link #3</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

這是鏈接到JSFiddle

+0

試了一下你說的,但不幸的是它仍然無法正常工作..試了幾個瀏覽器,沒有結果。以爲我在寫錯別字,所以我抄襲了你所說的話。這也行不通。謝謝! – Bas

+0

上面的代碼工作之前,但你可能缺少鏈接到jquery.js。您還可以檢查JSFiddle上的工作示例。 –