Bootstrap 3导航崩溃不起作用

Bootstrap 3 nav collapse not working

本文关键字：不起作用 崩溃 导航 Bootstrap      更新时间：2023-09-26

我参考了很多文章，但我不明白为什么我的collapse函数（以及我插入的任何其他js）不起作用。我在标题中包含了.js和jquery链接。我还扫描了我的代码。我会把我的代码放在导航，如果需要，提供一个链接到整个代码笔。

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;
}

您有一个打字错误。

<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">

您有两个问题。

  1. 您需要删除折叠<button>的父标记<header>（它不应该在那里）
  2. 然后，您需要更改（<button>的）data-target属性以引用可折叠的<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>
相关文章：