我的导航栏切换不折叠答案

【问题标题】：My navbar toggle does not collapse我的导航栏切换不折叠
【发布时间】：2019-06-28 15:58:44
【问题描述】：

我正在尝试重做我的个人页面，但导航栏出现问题。当我第一次制作它时我没有，现在我正在尝试添加一个并更改整个布局。我有 nabber 并且一切都到位，现在当屏幕很小时出现图标时，它不会崩溃。我按照引导程序的说明进行操作，我正在尝试更加精通它，但我似乎找不到它为什么不起作用的原因。我的代码在codepen.io

<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <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="#">PORTFOLIO</a>
    </div>

    <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#slide2">Home <span class="sr-only"></span></a></li>
        <li><a href="#slide2">About</a></li>
        <li><a href="#slide3">Projects</a></li>
        <li><a href="#slide4">Contact</a></li>
      </ul>
    </div>

  </div>
</nav>

【问题讨论】：

你需要像这样首先序列化你的 srcipt cdn jquery.js 然后 bootstrap.min.js

标签： html twitter-bootstrap navbar

【解决方案1】：

您的代码非常好。你做错的唯一一件事是在jQuery 之前包含Bootstrap。

This 是您代码的一个工作分支，我在其中更改了顺序以首先包含jQuery。您可以通过检查包含外部资源（CSS 或 JS）的笔的设置来更改顺序。

【讨论】：

谢谢，成功了！我只记得那里的顺序很重要。

【解决方案2】：

Jquery 不工作，尝试在关闭正文之前从 Jquery cdn 中添加此代码：

&lt;script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

您的 Jquery 似乎不起作用。在 html 文档的头部添加以下行：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：

【解决方案4】：

    <script> $(function(){ $('.nav-tabs a:first').tab('show'); }); </script>

【讨论】：

虽然此代码可能（或可能不会）解决问题，但一个好的答案还应该解释代码的作用以及如何问题。
仅代码答案被视为低质量帖子。请为您的代码添加一些解释