ブートストラップを動作させることができません

Question

ブートストラップのドロップダウンに問題があります。必要なファイルをすべて正しく添付しました。しかし、それでも動作しません。

<nav class="navbar navbar-default navbar-inverse"> 
<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 
<div class="navbar-collapse collapse" id="mainNavbar"> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Products</a></li> 
    </ul> 
    <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
    </form> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Subscribe</a></li> 
    </ul> 
</div> 

Answer 1

jqueryとbootstrapを置くのご注文が正しいことを確認してください。正しく動作するスニペットを確認してください。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<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> 
 
<nav class="navbar navbar-default navbar-inverse"> 
 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle" data-target="#mainNavbar" data-toggle="collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    </div> 
 
    <div class="navbar-collapse collapse" id="mainNavbar"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Products</a></li> 
 
    </ul> 
 
    <form class="navbar-form navbar-left" role="search"> 
 
     <div class="form-group"> 
 
     <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="button" class="btn btn-default">Submit</button> 
 
    </form> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Subscribe</a></li> 
 
    </ul> 
 
    </div>