在 Bootstrap 3 中以移动形式出现时导航栏出现问题答案

【问题标题】：Trouble with the navigation bar when in mobile form in Bootstrap 3在 Bootstrap 3 中以移动形式出现时导航栏出现问题
【发布时间】：2015-12-06 07:27:30
【问题描述】：

问题：当我在手机中预览我的网站时，我看到没有显示/隐藏导航栏链接的按钮，并且链接现在显示并且无法隐藏。当我在http://getbootstrap.com/components/#navbar-fixed-top 上测试导航栏时，它们运行良好。我尝试重新加载引导程序，但没有任何反应。

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

这是小提琴：

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>

【问题讨论】：

标签： twitter-bootstrap mobile twitter-bootstrap-3 navbar

【解决方案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>

这里还有 js-fiddle 的链接：Navbar jsfiddle。

【讨论】：

谢谢它帮助解决了这个问题，但是在我重新排列 JS 文件之前，该按钮不起作用。感谢您帮助解决它！ ;)

【解决方案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>

【讨论】：