BootStrap Navbar折叠问题

Question

我注释掉了代码的其余部分，看看它是否是导致问题的任何外部元素，但它们不是。 jQuery是链接的，BootStrap也是如此。按钮显示，但折叠功能不起作用。也许这只是我的眼睛，我拼错了，但这段代码有什么不对？

<div class="navbar navbar-inverse navbar-static-top">
 <div class="container">
<div class="navbar-brand">
  <a href="#about">
  <span class="glyphicon glyphicon-lamp"></span>Tommy Mertell
  </a>
</div>
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="glyphicon glyphicon-lamp" style="color:white;"></span>
  </button>
 <div class="collapse navbar-collapse">
   <ul class="nav navbar-nav navbar-right">
     <li><a href="#home" class="active">Home</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#port">Portfolio</a></li>
     <li><a href="#contact">Contact</a></li>
   </ul>
  </div>
   </div>
  </div>

Answer 1

Here is a fiddle with your updated pen

你没有结束你的评论。

您开始发表评论......

<!--

但是你没有添加结束注释行。

-->

因此，jQuery和Bootstrap没有在页面末尾加载。

Answer 2

打开控制台并确保页面上没有任何错误。我复制了你的代码并将它放在一个带有Bootstrap和jQuery的页面上，它对我有用。虽然你应该稍微改变结构，因为有一些水平滚动条。我会把你的品牌和导航栏切换按钮放在带有类navbar-header的div中。

Answer 3

您可以尝试将脚本和链接标签替换为bootstrap和jquery并将它们放入（按照相同的顺序）。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

可能与版本或您正在加载脚本/ css的订单有关。

希望有所帮助！