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

lden
7.6K
0
Как сделать чтобы в мобильном варианте меню сворачивалась?
Разметка:
<div class="navbar-collapse collapse"></div>

Комментарии ()

  1. Александр Мальцев
    04 мая 2015, 13:49
    Добрый день!
    Самый простой вариант — это использовать меню 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>
    
    А если надо что-то нестандартное тогда напишите подробнее
    1. lden
      03 мая 2015, 10:50
      После клика — не сворачивается!
      Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.