2014-11-06 212 views
6

当导航栏崩溃时,我的切换按钮不起作用。我已经多次查看了数据目标,看起来没问题。切换按钮崩溃在Bootstrap导航栏中不起作用

这里是我的代码:

<div class="navbar navbar-fixed-top navbar-inverse"> 
<div class="container"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html" title="The Title"> 
    <img style="max-width:100px;" src="images/LOGO-4.png"> 
    </a> 


    <div class="collapse navbar-collapse navbar-collapse"> 
     <ul class="nav navbar-nav pull-right"> 
      <li class="active"><a href="#">WORK</a></li> 
      <li><a href="#">CONTACT</a></li> 

     </ul> 
    </div> 

有谁知道问题是什么,如何解决呢?

+0

非常感谢,现在工作。我认为我的jQuery链接不正确。我的'a class'元素后面也没有关闭div标签。 – 2014-11-07 00:56:29

回答

5

当然,您的切换按钮会根据您的屏幕分辨率而有所不同。尝试一下:

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 


    </head> 
<body > 

<nav class="navbar navbar-inverse"> 
<div class="container-fluid"> 

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="index.html" title="The Title"> 
    <img style="max-width:100px;" src="images/LOGO-4.png"> 
    </a> 
</div> 

    <div class="collapse navbar-collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav pull-right"> 
      <li class="active"><a href="#">WORK</a></li> 
      <li><a href="#">CONTACT</a></li> 

     </ul> 
    </div> 
    </div> 
    </nav> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 

    </body> 
</html> 

在你的手机上试试看看。之后进入你的CSS文件,并设置屏幕大小的属性,如果切换按钮显示为。 切换按钮可能不会出现在桌面上,除非您更改这些属性,或将浏览器窗口调小一些,直到出现切换按钮。

例如,在我的浏览器窗口最大化,切换按钮不会出现。 Toggle bar not shown 不过,如果你一半调整您的浏览器窗口(或者,如果你浏览手机上),它会看起来像这样 When on mobile or a reduced browser size

要解决这个问题,你需要进入你的CSS设置。但是,只有当你想改变它时才是如此。否则,它会正常工作。

+0

非常感谢,现在正在工作。我认为我的jQuery链接不正确。我的'a class'元素后面也没有关闭div标签。 – 2014-11-07 00:58:21

3

看到你有图书馆的正确的进口,我哈德一个同样的问题,我不为什么有时它也有奇怪的行为与不同版本的jQuery

试试这个

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 


<!-- Fixed navbar --> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
      <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="#">Project name</a> 
     </div> 
     <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
       <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="../navbar/">Default</a></li> 
      <li><a href="../navbar-static-top/">Static top</a></li> 
      <li class="active"><a href="./">Fixed top</a></li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </nav> 
+0

感谢您对此的帮助,我认为我的jquery链接不正确 – 2014-11-07 00:58:59

1

希望这将有助于因我有同样的问题,并通过这个固定:

<body> 

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     ... 
    </nav> 

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 

</body> 
1

每次我们都面临这个问题的版本“为什么是导航栏,切换按钮不工作?”,但是这一次我们已经找到了解决办法并特别感谢谷歌Chrome开发团队为开发显示错误清楚。

我们应该在引导javascript文件之前包含jquery库文件。

+0

谢谢,这真的是我的问题。 – mimic 2017-05-13 02:44:59