Question

我正在尝试重做我的个人页面，我遇到了Navbar的问题。当我第一次做它时我没有，现在我想添加一个并改变整个布局。我有一个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添加此内容：

  location === window.location

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

你的代码非常好。您唯一错误的做法是在Bootstrap之前加入jQuery。

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

Answer 4

T = java.sql.Time

我的导航栏切换不会崩溃

4 个答案: