Навигация с Bootstrap не работает для мобильных телефонов

Я использую Bootstrap для навигации. Так что он автоматически работает на мобильном устройстве. Если я сделаю страницу меньшей, а затем вы увидите типичные горизонтальные линии в правом углу. но если вы нажмете на него, ничего не произойдет. Я имею в виду, что вы увидите навигацию, которую вы увидите на экране с полной шириной. Я также добавил картинку.Навигация с Bootstrap не работает для мобильных телефонов

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 


    <title>@ViewBag.Title - Lola Cycling Club</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/bundles/jqueryval") 
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

</head> 
<body> 



    <div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 

       @Html.ActionLink("lola", "Index", "Home", null, new { @class = "navbar-brand" }) 

       <img id="img_logoRight" alt="Logo" src="@Url.Content("~/Images/lola_heart.png")" /> 

      </div> 
      <div class="navbar-collapse collapse"> 
       <br /> 
       <div class="float-right"> 
        @*<section id="login"> 
         @Html.Partial("_LoginPartial") 
        </section>*@ 

        <ul class="nav navbar-nav"> 

         <li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Account") { @Html.AttributeEncode("class=active") ; }> 
          @Html.ActionLink("WHO", "Index", "Account") 
         </li> 

         <li @if (@ViewContext.RouteData.GetRequiredString("controller") == "What") { @Html.AttributeEncode("class=active") ; }> 
          @Html.ActionLink("WHAT", "Index", "What") 
         </li> 

         <li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Course") { @Html.AttributeEncode("class=active")  ; }> 
         @Html.ActionLink("AGENDA", "Index", "Calendar") 
         </li> 

         <li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Instructor") { @Html.AttributeEncode("class=active")  ; }> 
          @Html.ActionLink("PHILOSPY", "Index", "Instructor") 
         </li> 

         <li @if (@ViewContext.RouteData.GetRequiredString("controller") == "Department") { @Html.AttributeEncode("class=active")  ; }> 
          @Html.ActionLink("BUCKET-LIST", "Index", "Department") 
         </li> 





         <li class="nav"> @Html.Partial("_LoginPartial")</li> 

        </ul> 
       </div> 
      </div> 


     </div> 
    </div> 
    <div class="container body-content"> 
     @RenderBody() 
     <hr /> 
     <footer> 
      <p>&copy; @DateTime.Now.Year - Lola Cycling Club</p> 
     </footer> 
    </div> 

    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/bootstrap") 
    @RenderSection("scripts", required: false) 
</body> 
</html>

enter image description here