Bootstrap 3导航崩溃不起作用答案

【问题标题】：Bootstrap 3 nav collapse not workingBootstrap 3导航崩溃不起作用
【发布时间】：2014-11-12 17:40:06
【问题描述】：

我参考了许多文章，但我无法弄清楚为什么我的折叠功能（以及我插入的任何其他 js）不起作用。我在标题中包含了 .js 和 jquery 链接。我还扫描并扫描了我的代码。我会为导航输入我的代码，如果需要，我会提供整个 codepen 的链接。

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>Sume</title>

    <!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!--font awesome-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <!--fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
<!-- Optional theme -->
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>     
  </head>

  <body>    
      <!--nav-->
         <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
        <div class="container">
          <header class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">
                <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="#header">Sume</a>
          </header>
          <div class="collapse navbar-collapse pull-right" id="nav-collapse">
             <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="#intro">About</a></li>
              <li><a href="#exp">Experience</a></li>
               <li><a href="#skl">Technical Skills</a></li>
              <li><a href="#img-port">Image Portfolio</a></li>
               <li><a href="#contact">Contact</a></li>             
            </ul>
          </div>
        </div>
      </nav>

CSS

html, body {
  height:100%;
  width:100%;
}
* {
  font-family: 'Open Sans', sans-serif;
}
a{
  text-decoration:none;
}
.navbar-nav a {
  color: white;
  font-size:125%;

}
.nav a:hover {
  background: transparent !important;
  color:white;
  border-bottom:3px solid white !important;
}
.nav a:focus {
  color:gray;
}
.navbar .navbar-header .navbar-brand {
    color: white;
} 
.navbar {
  background-color:rgb(37,96,155);
  padding-bottom:-1% !important;
}
.icon-bar {
  background-color:white;
}
.navbar .navbar-brand {
  background-color:rgb(37,96,155);
  color:white;
  border: 1px solid white;
  font-weight:lighter;
    -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
.navbar .navbar-brand:hover {
  border-bottom: 3px solid white;
  border-top:none;
  border-left:none;
  border-right:none;
  font-weight: normal;
  -webkit-transition: border .2s ease-in-out;
    -moz-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

【问题讨论】：

你要崩溃什么？

标签： javascript jquery html twitter-bootstrap navbar

【解决方案1】：

你有一个错字。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar collapse">

您的数据目标应与列表的 DIV ID (<div class="collapse navbar-collapse pull-right" id="nav-collapse">) 匹配。

这应该可以解决问题：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">

【讨论】：

抱歉，第二行代码和我的一模一样。
您的数据目标应该是 #nav-collapse 而不是。完全阅读我的答案。第二行代码的 ID 应该与数据目标匹配，但它不匹配。您的数据目标无效。
感谢工作。我觉得我以前尝试过，但我什么也没得到。欣赏！

【解决方案2】：

您有 2 个问题。

您需要删除折叠<button> 的父标签<header>（它不应该在那里）。
然后您需要更改data-target 属性（您的<button>）以引用您的可折叠<div>。

HTML

 <nav role="navigation" class="navbar navbar-fixed-top" id="nav">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
            <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="#header">Sume</a>
        </div>
        <div class="collapse navbar-collapse" id="nav-collapse">
          <ul class="nav navbar-nav navbar-right">
           <li class="active"><a href="#intro">About</a></li>
           <li><a href="#exp">Experience</a></li>
           <li><a href="#skl">Technical Skills</a></li>
           <li><a href="#img-port">Image Portfolio</a></li>
           <li><a href="#contact">Contact</a></li>             
         </ul>
       </div>
     </div>
    </nav>

【讨论】：