引导导航栏崩溃不起作用答案

【问题标题】：bootstrap navbar collapse won't work引导导航栏崩溃不起作用
【发布时间】：2016-06-25 18:13:47
【问题描述】：

我正在 codepen.io 上创建一个投资组合网站，但我的导航栏折叠按钮将无法工作，因为窗口大小减小了。 Codepen：https://codepen.io/RayFitzgerald/full/vKgYoj/ 为写得不好的代码道歉。我是新人。

HTML

    <body data-spy="scroll" data-target=".navbar">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">

  <a href="#" class="navbar-brand">Ray Fitzgerald</a>

  <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">button
  </button>

  <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav">
      <li><a href="#About">About</a></li>
      <li><a href="#Portfolio">Portfollio</a></li>
      <li><a href="#Social">Social</a></li>
    </ul>
  </div>

</div>
 </nav>
<!-- Main Body & Text Items -->
<div class="container">
<div class="jumbotron">
  <div class="intro-text" id="About">
  My name is Ray Fitzgerald and I am a young Programmer and Web Developer
  </div>
  <div class="intro-text" id="Portfolio">
    Portfolio
  </div>
  <div class="intro-text" id="Social">
      Social
  </div>

 </div>
 </div> 

</body>

CSS

    body{
  padding-top: 50px;
}
.intro-text{
  font-size: 30px;

}
#About{
  height: 500px;
}
#Portfolio{
  height: 500px;
}
#Social{
  height: 500px;
}

【问题讨论】：

标签： html css twitter-bootstrap navbar

【解决方案1】：

在您提供的链接中找不到 bootstrap.min.js 和 JQuery 库。

添加 JQuery 库，然后添加 bootstrap.min.js 即可。

【讨论】：

【解决方案2】：

Bootstrap 导航栏切换组件仅在代码中包含 Bootstrap Javascript 时才有效。包含引导 javascript 文件，它就像魅力一样工作。

提醒：Bootstrap JS 仅在您首先包含 jQuery 时才有效。

【讨论】：

【解决方案3】：

Try this code as it is in application this code works me at  my end

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Sitename</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page sub</a></li>
            <li><a href="#">Page sub</a></li>
            <li><a href="#">Page sub</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h3>Collapsible Navbar</h3>
</div>

</body>
</html>

【讨论】：