2015-10-12 75 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上的工作示例。 –