Задать вопрос
Ответы пользователя по тегу Bootstrap
  • Как сделать вертикальное сворачивающееся меню bootstrap 4?

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

    Возможно это Костыли, но альтернатив найти не удалось.
    Ответ написан
    Комментировать
  • Как правильно реализовать левое боковое меню (navbar) на bootstrap 4?

    Не знаю насколько правильно, но я нашёл такое решение.
    <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>

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