0

Бутстраповская навигация некорректно работает. В мобильной версии когда список(пункты) меню должны сворачиваться - этого не происходит. Сворачивается только фон меню. Сам маркированный список остается неподвижным. Как это исправить и как сделать чтобы по умолчанию меню было свёрнуто? Вот код

<nav class="navbar navbar-default" role="navigation">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                </button>
              </div>
            </div>

            <div class="collapse navbar-collapse" id="responsive-menu">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Пункт 1</a></li>
                <li><a href="#">Пункт 2</a></li>
                <li><a href="#">Пункт 3</a></li>
                <li><a href="#">Пункт 4</a></li>
                <li><a href="#">Пункт 5</a></li>
              </ul>
            </div>
          </nav>

1 ответ 1

1

<!DOCTYPE html>
<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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<body>
<nav class="navbar navbar-default" role="navigation">
            <div class="container">
              <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#responsive-menu">
                  <span class="sr-only">Toggle navigation</span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                </button>
              </div>
            </div>

            <div class="collapse navbar-collapse" id="responsive-menu">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Пункт 1</a></li>
                <li><a href="#">Пункт 2</a></li>
                <li><a href="#">Пункт 3</a></li>
                <li><a href="#">Пункт 4</a></li>
                <li><a href="#">Пункт 5</a></li>
              </ul>
            </div>
          </nav>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

 </body>
</html> 

Я подключил все, и сделал тут, запусти, посмотри, работает все ок...

9
  • нет, с этим всё впорядке, проверил
    – Bohdan
    15 авг 2017 в 7:43
  • Тогда ожидайте других людей со стажем) Только что запустил этот код у себя, все ок. 15 авг 2017 в 7:44
  • Не сворачивается сам маркированный список, а меню(бекграунд) сворачиваеться и разворачиваеться(как раз под высоту списка) без проблем, Может класс какой то пропущен или другой атрибут?
    – Bohdan
    15 авг 2017 в 7:44
  • я использую сборщик grunt может в этом дело?
    – Bohdan
    15 авг 2017 в 7:45
  • С ним не работал , по этому не скажу этого. Опыта за спиной огромного не достиг. 15 авг 2017 в 7:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.