Bootstrap CSS отзывчивым Navbar не работает

Вот Navbar HTML:Bootstrap CSS отзывчивым Navbar не работает

<nav class="navbar navbar-light" style="background-color: #967BB6;"> 
    <div class="container-fluid"> 
     <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> 
      <a class="navbar-brand" href="{% url 'home' %}">Site</a> 
      </div> 

      <div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a class="navigate" href="{% url 'profile' request.user.username %}">My Profile</a></li> 
        <li><a class="navigate" href="{% url 'settings' %}">Settings</a></li> 
        <li><a class="navigate" href="{% url 'logout' %}">Logout</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>

Он прекрасно смотрится на больших экранах. Когда я свожу к минимуму или получаю доступ к нему на своем телефоне, элементы смены навигационных панелей исчезают из их обычного положения (как и предполагалось), и я могу навести курсор на правую сторону навигационной панели, где должна быть кнопка, и моя мышь изменяется указатель, но когда я нажимаю, ничего не происходит. Также их значок не является кнопкой. Указатель мыши просто изменяется, как если бы он зависал над кнопкой.

Вот заголовок HTML:

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Title</title> 

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
</head>

Кто-нибудь есть какие-либо предложения? Должен ли я включать что-то с использованием JavaScript? Спасибо.

источник

2016-08-21 conjenks

Вы только включая CSS - Вы должны также включать в себя библиотеку JQuery - (Bootstrap использует JQuery для манипулирования DOM) и фактического Bootstrap.js файл

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

источник

2016-08-21 01:25:07 gavgrif

спасибо - рад помочь :) – gavgrif

Bootstrap CSS отзывчивым Navbar не работает

ответ

Смежные вопросы