2016-06-25 11 views
0

私は自分のウェブページの縮尺を任意の画面サイズにするためにTwitter Bootstrap 3を使用しています。また、トリガーボタンを押してもナビゲーションバーは展開されません。ここでBootstrap 3 Navbar Not Expanding

はコードです:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- Latest compiled and minified CSS: Bootstrap 3 --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript:Bootstrap 3 --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 

    <meta charset="utf-8"> 
    <title>Webpage</title> 
    </head> 
    <body> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand">Webpage</a> 
      <button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" aria-expanded="false" aria-controls="navbar3"> 
       <span class="sr-only">Toggle nav</span> 
       <span class="glyphicon glyphicon-plus-sign"></span> 
      </button> 
      </div> 
       <ul class="nav navbar-nav collapse navbar-collapse"> 
       <li class="active"><a href="/p1">Page1</a></li> 
       <li><a href="/p2">Page2</a></li> 
       <li><a href="/p3">Page3</a></li> 
       </ul> 
     </div> 
     </nav> 

     <div id="content"> 

     </div> 
    </body> 
</html> 

間違って起こっているとどのように私はそれを修正することができますか?

答えて

0

jQueryは最初に読み込む必要がありますので、依存関係にはライブラリを使用できます。 bootstrap.min.jsはjQueryに依存するので、の後に jQueryがロードされているはずです。

jquery.min.jsの前に、ブートストラップjsファイルbootstrap.min.jsとナビバーが正常に動作するはずです。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> 
<!-- Latest compiled and minified JavaScript:Bootstrap 3 --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>