Как сделать вертикальное сворачивающееся меню bootstrap 4?

Подскажите как можно сделать вертикальное сворачивающееся меню на bootstrap 4?
Как здесь bootstrap-4.ru/docs/4.1/getting-started/introduction левый сайдбар.
Смотрел исходный код, так и не смог разобраться.

Нужно чтобы на десктопах меню было вертикальным, а на мобильной версии сворачивалось в гамбургер.
  • Вопрос задан
  • 2824 просмотра
Пригласить эксперта
Ответы на вопрос 2
lukoie
@lukoie
htmlbook.ru/css/media
Ответ написан
@Aleks7487 Автор вопроса
Не знаю насколько правильно, но я нашёл такое решение.
<div class="container-fluid">
      <div class="row">
        <header class="col-md-3">
          <nav class="sidebar-sticky bg-dark navbar-dark navbar-expand-md">
            <a href="#" class="logo navbar-brand">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto flex-column">
                <li class="nav-item active">
                  <a href="" class="nav-link">О нас</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Проекты</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Команда</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Отзывы</a>
                </li>
                <li class="nav-item">
                  <a href="" class="nav-link">Контакты</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>
        <!-- end header -->

        <main class="col-md-9">
          <h1>Привет, это сайт!</h1>
        </main>
        <!-- end main -->
      </div>
    </div>

Возможно это Костыли, но альтернатив найти не удалось.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы