我的导航栏切换不折叠

Question

我正在尝试重做我的个人页面，但导航栏出现问题。当我第一次做的时候我没有，现在我想添加一个并改变整个布局。我已经启动了 nabber，一切就绪，现在当屏幕很小时显示图标时，它不会崩溃。我按照 bootstrap 的说明进行操作，我正在尝试更加熟练地使用它，但我似乎无法找到它不起作用的原因。我的代码在 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>

Answer 1

Jquery 不工作，请尝试从 Jquery cdn 添加这个在关闭正文之前代码的末尾：

<script   src="https://code.jquery.com/jquery-3.1.1.js"   integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="   crossorigin="anonymous"></script>

Answer 2

看来你的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>

Answer 3

您的代码完全没问题。您做错的唯一一件事是在 jQuery 之前包含 Bootstrap。

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

Answer 4

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

我的导航栏切换不折叠

My navbar toggle does not collapse

html

navbar

twitter-bootstrap