Html 引导导航条问题_Html_Css_Twitter Bootstrap

Html 引导导航条问题

html css twitter-bootstrap

Html 引导导航条问题,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,在我正在处理的站点上，导航栏上的背景在展开时可以正常工作，但在收拢的视图上，按钮不会打开导航栏。下面是我用于导航栏的代码。如果你对为什么会发生这种情况有任何想法，请告诉我。谢谢 <nav class="navbar navbar-default"> <div class="container-fluid">  <div class

在我正在处理的站点上，导航栏上的背景在展开时可以正常工作，但在收拢的视图上，按钮不会打开导航栏。下面是我用于导航栏的代码。如果你对为什么会发生这种情况有任何想法，请告诉我。谢谢

<nav class="navbar navbar-default">
<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="index.html"><img src="http://entropymag.org/wp-content/uploads/2014/10/outer-space-wallpaper-pictures.jpg" height="25" width="40"></a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


  <ul class="nav navbar-nav navbar-center">
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="resume.html">Skills</a></li> 

  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>


切换导航

您一定漏掉了bootstrap.js

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

像jlemm45建议的那样。。。这样做

有两件事可能是问题所在，第一件事是您需要像其他答案所建议的那样包括引导程序的javascript文件。接下来，为了让引导程序的javascript正常工作，您需要包含jquery。接下来，您需要在包含引导程序的javascript之前加载jquery的javascript库。所以说你的导航条码看起来是正确的，所以这一定是其中一个问题。就像我说的，您需要包括jquery和引导javascript，并且需要首先加载jquery。所以它应该看起来像下面这样

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <!-- Latest compiled and minified Jquery JavaScript This needs to be before bootstraps javascript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <!-- Latest compiled and minified Bootstrap JavaScript -->
    <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">
      <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="index.html"><img src="http://entropymag.org/wp-content/uploads/2014/10/outer-space-wallpaper-pictures.jpg" height="25" width="40"></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


        <ul class="nav navbar-nav navbar-center">
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="resume.html">Skills</a></li> 

        </ul>
      </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
  </body> 
</html>


切换导航

您可以在本地链接到css和javascript文件，也可以像上面一样使用cdn，但我想我会使用cdn，这样您就可以复制和粘贴此代码，并查看其工作情况。希望这能有所帮助。

从您显示的代码中，我看不出有任何问题-