在 Bootstrap 3 中处于移动形式时导航栏出现问题

Question

问题：当我在手机上预览我的网站时，我看到 showing/hiding 导航栏链接没有按钮，链接现在显示并且可以被隐藏起来。当我在 http://getbootstrap.com/components/#navbar-fixed-top 上测试导航栏时，它们工作得很好。我尝试重新加载 bootstrap 但没有任何反应。

代码有问题还是我遗漏了什么？

这是fiddle：

https://jsfiddle.net/td9p60qr/

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jakob Aindreas Rivera</title>
    <style type="text/css" media="all">
      body { padding-top: 70px; }
    </style>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="index.html">Jakob Aindreas Rivera</a>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Projects <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="projects/projects.html">Projects Home</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="projects/glass.html">Glass</a></li>
                <li><a href="projects/clockjs.html">ClockJS</a></li>
                <li><a href="projects/pixelblocksmod.html">PixelBlocks Mod</a></li>
             </ul>
           </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="jumbotron">
        <h1>Welcome to my webzone!</h1>
        <p>Hello and my name is Jakob Aindreas Rivera, and this is my webzone. Feel free to browse the site!</p>
        <p>Thank you for stopping by! ;)</p>
      </div>
      <div class="page-header">
        <h2>News</h2>
      </div>
      <article>
        <div class="row">
          <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
              <div class="caption">
                <h3>PixelBlocks intial release soon!</h3>
                <p>THe new MC mod PixelBlocks will now have it's intial release date soon!</p>
                <p><a href="#" class="btn btn-primary" role="button">Read more</a></p>
              </div>
            </div>
          </div>
        </div>
      </article>
    </div>
  </body>
</html>

Answer 1

您似乎没有正确使用此功能。您可以在下面找到仅包含 navbar 的部分。

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <!-- Header -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Jakob Aindreas Rivera</a>
    </div>
    <!-- Navbar Links -->
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
</div>

这里还有 link 到 js-fiddle: Navbar jsfiddle.

Answer 2

我刚刚修复了它，但上面的答案也帮助了我的问题。

我所做的是重新排列我的 JavaScript 文件，我将 jQuery 从 bootstrap JS 文件之后的行移动到 Bootstrap JS 文件之前的行.

示例：

<script src="http://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

在 Bootstrap 3 中处于移动形式时导航栏出现问题

Trouble with the navigation bar when in mobile form in Bootstrap 3

mobile

navbar

twitter-bootstrap

twitter-bootstrap-3