メニューが折りたたまれていません

私はモバイル画面用に折りたたみ可能なナビゲーションバーを作ろうとしています。折りたたまれ、アイコンバーのスパンタグが表示されます。しかし、それをクリックすると何もしません。メニューが折りたたまれていません

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<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="CSS/main.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
    <title>Home Page</title> 
</head> 
<body> 
<nav class="navbar navbar-default navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" style="margin-top: -15px; float: left;" href="#"> 
      <img alt="Brand" class="pull-left col-xs-0" style="margin-left: -15px;" src="Images/TrueInternet.png"> 
      </a> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     <span class="icon-bar"></span> 
     </button> 
     </div> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Internet</a></li> 
       <li><a href="#">Phone</a></li> 
       <li><a href="#">Android TV</a></li> 
       <li><a href="#">Shaw Direct</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
    </div> 
    </div> 
</nav><div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
    </div> 
</div> 

</body> 
</html>

私はちょうどそれを把握するように見えることはできません。

は、ここに私のHTMLです。

出典

2016-12-28 Thomas Hutton

[この]（HTTP ：//getbootstrap.com/getting-started/）が役立ちます。必要なすべてのリソースに注意を払う。 'bootstrap.css'、' jquery.js'、 'bootstrap.js'が必要です。また、 'bootstrap.css'の後に' font-awesome.css'をロードする必要があります。ミニバージョンをロードするかもしれませんが、 'js'ファイルの順番は同じにする必要があります。 –

あなたはメタタグが欠落しています不可欠

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

特に、ビューポートのISTは、ブートストラップが正しく動作するために。

また、あなたはjQueryの実装はありません。は、あなたのbodyタグの一番下に以下を追加します。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script>

あなたはメタおよびスクリプトタグを追加した後、これはあなたのコードのようになります。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <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="CSS/main.css"> 
 
    <title>Home Page</title> 
 
</head> 
 
<body> 
 
<nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <a class="navbar-brand" style="margin-top: -15px; float: left;" href="#"> 
 
      <img alt="Brand" class="pull-left col-xs-0" style="margin-left: -15px;" src="Images/TrueInternet.png"> 
 
      </a> 
 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
 
      <ul class="nav navbar-nav"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Internet</a></li> 
 
       <li><a href="#">Phone</a></li> 
 
       <li><a href="#">Android TV</a></li> 
 
       <li><a href="#">Shaw Direct</a></li> 
 
       <li><a href="#">Contact Us</a></li> 
 
      </ul> 
 
    </div> 
 
    </div> 
 
</nav><div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
     <div class="col-xs-12 col-md-1">Test. Test. Test. Test. Test. Test. Test. Test.</div> 
 
    </div> 
 
</div> 
 
    
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 
</html>

出典

2016-12-28 20:36:51 kkreft

ありがとう、これはそれを修正しました！私はもう少し問題がありますが、私は後でそれらについて作業します。 –

メニューが折りたたまれていません

答えて

関連する問題