Navbar折りたたみボタンが機能しない

Question

上記の画像が表示されます。私はその理由がわからない。 Im noobをCSS、html、さらにはブートストラップする。誰でも私にこの問題を解決する方法を教えてもらえますか？前もって感謝します。

ここは私のHTMLコードです。

 <nav class="navbar navbar-default navbar-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"></button> 
      <img class="img-responsive" src="images/brandz.png" > 
     </div> 

    <div class="collapse navbar-collapse" id="nav-collapse"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Students</a></li> 
      <li><a href="#">Faculty</a></li> 
      <li><a href="#">About us</a></li> 
      <li><a href="#">Contact us</a></li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
        <li><a data-toggle="modal" href="#myModal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
        <!-- Modal --> 
         <div id="myModal" class="modal fade" role="dialog"> 
          <div class="modal-dialog"> 
        <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <button type="button" class="close" data-dismiss="modal">&times;</button> 
            <img src="images/logo.png" class="logo"> 
           </div> 
           <div class="modal-body"> 
            <p>Some text in the modal.</p> 
           </div> 
           <div class="modal-footer"> 
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
           </div> 
          </div> 
          </div> 
         </div> 
     </ul> 
    </div> 
</div> 
</nav> 

ここに私のCSSコードです。

.navbar-default .navbar-nav > li > a { 
font-weight: 300; 
color: #949494; 
display: block; 
padding: 3px 20px 5px 60px; 
border-bottom: 3px solid transparent; 
line-height: 97px; 
-webkit-transition: all .4s ease-in-out 0s; 
-moz-transition: all .4s ease-in-out 0s; 
transition: all .4s ease-in-out 0s; 

} 
.navbar-default{ 
background-color:#fff; 

} 
.nav>li>a { 
    position: relative; 
} 
.navbar-default .navbar-right > li > a { 
padding-left: 70px; 
padding-right: 1px; 
} 
.glyphicon-log-in{ 

} 

Answer 1

1）

2）を添加

http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css私のヘッダにFontAwesomeを含む

<i class="fa fa-bars"></i> 

に

<button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"></button> 

例：

<button type="button" class="navbar-toggle" data-togglel="collapse" data-target="#nav-collapse"><i class="fa fa-bars"></i></button>