2017-05-07 8 views
2

小さな画面に入り、ハンバーガーアイコンが有効になると、クリックすると何も起こりません。それは動作しません。あなたが3.3.7/js/bootstrap.min.jsjqueryが欠落しているNAVハンバーガー開けない

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css"> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <!-- 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="/">GroupWrites</a> 
    </div> 

    <!--Collect the nav links, forms, and other content for toggling --> 
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="/browse">Browse</a></li> 
     <li><a href="/library">Library</a></li> 
     <li><a href="/about">How It Works</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <% if(!currentUser){ %> 
     <li><a href="/register">Sign Up <i class="fa fa-user-plus"></i></a></li> 
     <li><a href="/login">Log In <i class="fa fa-user-circle"></i></a></li> 
     <% } else { %> 
     <li><a href="#">Signed In As <%= currentUser.username %></a></li> 
     <li><a href="/logout">Log Out <i></i></a></li> 
     <% } %> 
     </ul> 
    </div> 
    </div> 
</nav> 
+0

は、あなたがあなたのコード内でブートストラップを含めていますか? – kojow7

+0

@ kojow7はい、ちょうど上のコードで私のboostrapのリンクを追加しました – SalokinSwift

+0

@ nguer092何か答えがあなたに役立つならば、stackoverflowへようこそ(http://meta.stackexchange.com/questions/173399/how-to- upvote-on-stack-overflow)、答えがあなたが探しているものであれば、[正解](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) )将来の読者のために。ありがとうございました! –

答えて

1

:私のコードは次のように、助けてくださいますか? :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css"> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 
    <!-- 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="/">GroupWrites</a> 
 
    </div> 
 

 
    <!--Collect the nav links, forms, and other content for toggling --> 
 
    <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="/browse">Browse</a></li> 
 
     <li><a href="/library">Library</a></li> 
 
     <li><a href="/about">How It Works</a></li> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <% if(!currentUser){ %> 
 
     <li><a href="/register">Sign Up <i class="fa fa-user-plus"></i></a></li> 
 
     <li><a href="/login">Log In <i class="fa fa-user-circle"></i></a></li> 
 
     <% } else { %> 
 
     <li><a href="#">Signed In As <%= currentUser.username %></a></li> 
 
     <li><a href="/logout">Log Out <i></i></a></li> 
 
     <% } %> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

+0

ありがとうございます。問題は解決しました。だからシンプルな、それはどのように滑ったのか分からない。 – SalokinSwift

+0

@ nguer092と同様に問題を発注し、CSSを読み込み、jQueryを読み込み、次にブートストラップjs –

+0

ありがとう!何らかの理由で実際に彼らが私のフッターに入っているのを見つけましたか?私は今そこからそれらを消すことができますか? – SalokinSwift

関連する問題