Как правильно реализовать левое боковое меню (navbar) на bootstrap 4?

Question

[Viktor Burdale]

Здравствуйте. Начинаю изучать 4ю версию bootstrap. Не понятно как правильно реализовать как у тостера, вертикальное меню слева на больших экранах и меню вверху на маленьких.

С горизонтальным все просто, в документации достаточно описания по горизонтальному. По вертикальному нашел лишь:

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Даже если вставить этот код, то как правильно подключить блок горизонтального навбара на маленьких экранах?

В 3м бутстрапе я там писал блок с widht: 15%, float: left, position: fixed и т.д. И отображал его с помощью visible-lg на больших экранах. А на маленьких экранах уже появлялся блок навбара с "бургером" с помощью класса: hidden-lg..

Сейчас я эти классы адаптивности вообще не нахожу..

Answer 1

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

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

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

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

Answer 2

[serenia1]

ребят все проще

https://codepen.io/Serhii75/pen/OEQrgM