Bootstrap 导航栏折叠按钮适用于 PC 但不适用于笔记本电脑或 phone

Question

bootstrap 导航栏折叠按钮仅适用于我的 PC，不适用于我的笔记本电脑或 phone。我的电脑是运行 windows 7，我的笔记本电脑是运行 windows 10，我有一个 android phone。据我所知，它们都已更新，并且都在使用 chrome。我一直在 codepen 上完成所有编码。

Link 到代码笔：https://codepen.io/mounti/pen/grBQBj

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 </head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarbutton">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar Practice</a>
      </div>
      <div class="collapse navbar-collapse" id="navbarbutton">
        <ul class="nav navbar-nav">
          <li><a href="#">First</a></li>
          <li><a href="#">Second</a></li>
          <li><a href="#">Third</a></li>
        </ul>
      </div>
    </div>
  </nav>

</body>

Answer 1

您在 bootstrap js CDN 中使用了错误的 link :

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

使用这个 link :

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bootstrap 导航栏折叠按钮适用于 PC 但不适用于笔记本电脑或 phone

Bootstrap navbar collpase button works on PC but not laptop or phone

html

jquery

navbar

twitter-bootstrap