Question

当导航栏折叠时，我的切换按钮不起作用。我已经多次检查了数据目标并且看起来没问题。

这是我的代码：

<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>

有人知道问题是什么以及如何解决它？

Answer 1

当然，您的切换按钮会因您的屏幕分辨率而异。尝试以下方面：

    <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文件并设置屏幕大小的属性，如果切换按钮看起来那么。更改这些属性之前，切换按钮可能不会显示在桌面上，或者将浏览器窗口的大小调整为较小，直到切换按钮出现为止。

EG。在我的浏览器窗口中最大化，切换按钮不会出现。 Toggle bar not shown 但是，如果您将浏览器窗口调整一半（或者如果您正在手机上冲浪），它会看起来像这样 When on mobile or a reduced browser size

要解决此问题，您需要进入自己的CSS设置。但这只是你想要改变它。否则它会正常工作。

Answer 2

看到你有正确的库导入，我遇到了同样的问题，我不知道为什么有时它会有不同版本的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>

Answer 3

希望它会有所帮助，因为我遇到了同样的问题并通过这个解决了问题：

<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>

Answer 4

Default navbar - Requires JavaScript plugin

如果禁用了JavaScript并且视口足够窄以致导航栏崩溃，则无法展开导航栏并查看.navbar-collapse内的内容。

响应式导航栏要求折叠插件包含在您的Bootstrap

版本中

Answer 5

每次我们遇到这个问题＆＃34;为什么导航栏切换按钮不起作用？＆＃34;，但这次我们找到了解决方案，特别感谢Google Chrome开发团队明确显示错误。

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

切换按钮折叠在Bootstrap导航栏中不起作用

5 个答案: