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

这是您更新的笔的小提琴 。

您尚未结束评论。

您开始发表评论...

<!--

但是您没有添加结尾注释行。

-->

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

Answer 2

打开控制台，并确保页面上没有任何错误。 我复制了您的代码，并将其放在包含Bootstrap和jQuery的页面上，并且对我有用。 尽管您应该更改结构，因为有一些水平滚动条。 我会将您的品牌和navbar-toggle按钮放在div中，并以navbar-header类开始。

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的顺序有关。

希望有帮助！