bootstrap navbar collapseが機能しません

-1

codepen.ioでポートフォリオサイトを作成していますが、ナビゲーションバーの崩壊ボタンが機能せず、ウィンドウサイズが小さくなりました。 Codepen：https://codepen.io/RayFitzgerald/full/vKgYoj/あまり書かれていないコードに対する謝罪。私は新しいです。bootstrap navbar collapseが機能しません

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

出典

2016-06-25 Ray Fitzgerald

ブートストラップナビゲーションバーのトグル・コンポーネントは、ブートストラップのJavascriptがコードに含まれている場合のみ動作します。ブートストラップのjavascriptファイルを含めると、それは魅力的に機能します。

注意：Bootstrap JSは、jQueryを最初に組み込む場合にのみ機能します。

出典

2016-06-25 10:07:08

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>

出典

2016-06-25 10:07:02 sms

bootstrap.min.jsはありません。あなたが提供するリンクにはJQueryライブラリはありません。

JQueryライブラリを追加し、bootstrap.min.jsを追加すると動作します。

出典

2016-06-25 10:13:47 amyogiji

bootstrap navbar collapseが機能しません

答えて

関連する問題