Bootstrap navbar collpase按钮适用于PC但不适用于笔记本电脑或手机

时间:2016-04-29 15:15:23

标签: jquery html twitter-bootstrap navbar

引导程序导航栏折叠按钮仅适用于我的PC,而不适用于我的笔记本电脑或手机。我的电脑正在运行Windows 7,我的笔记本电脑正在运行Windows 10,我有一部Android手机。据我所知,他们全都更新了,他们都在使用chrome。我一直在对codepen进行所有编码。

指向codepen的链接: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>

1 个答案:

答案 0 :(得分:0)

你在bootstrap js CDN中使用了一个错误的链接:

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

使用此链接:

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