Почему не сворачивается Bootstrap меню?

Как сделать чтобы в мобильном варианте меню сворачивалась? Разметка:

<div class="navbar-collapse collapse"></div>

Комментарии: 2

Александр Мальцев
Александр Мальцев
Добрый день!
Самый простой вариант — это использовать меню Twitter Bootstrap 3.
1. Вы создали меню, а не создали во что оно будет сворачиваться:
Например:
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <!-- Меню будет сворачиваться в эту кнопку -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
2. Необходимо указать вашему меню какой-нибудь идентификатор. Так как в шаге 1 я уже указал, что у кнопки data-target="#menu", то с выбором идентификатора я уже определился:
<div id="menu" class="navbar-collapse collapse">
<!-- ... -->
</div>
3. В итоге у нас получится следующий ход:
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <!-- Меню будет сворачиваться в эту кнопку -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="menu" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#1">1</a></li>
        <li><a href="#2">2</a></li>
        <li><a href="#3">3</a></li>
        <li><a href="#4">4</a></l>
      </ul>
    </div>
  </div>
</nav>
А если надо что-то нестандартное тогда напишите подробнее
lden
lden
После клика — не сворачивается!