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

Question

[Алексей Клёнин]

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

Нужно чтобы на десктопах меню было вертикальным, а на мобильной версии сворачивалось в гамбургер.

Answer 1

[lukoie]

htmlbook.ru/css/media

Comments

[Алексей Клёнин]

Спасибо, капитан очевидность. Это я знаю изначально. Интересует именно как это сделать средствами Bootstrap'а

[lukoie]

Алексей Клёнин, по постановке вопроса никак не видно знали Вы это или нет.
Средствами бутстрапа: bootstrap-4.ru/docs/4.1/examples/navbars

Answer 2

[Алексей Клёнин]

Не знаю насколько правильно, но я нашёл такое решение.

<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>

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