Bootstrap 4 - Submenu

Denis
Denis
3,3K
4
Содержание:
  1. Комментарии
Добрый день!
Нужна помощь, не правильно работает Submenu. При нажатии на «Submenu Link» список раскрывается вниз, а нужно вправо. Использую Bootstrap 4.
Подскажите, что я сделал не так?
Спасибо за ответ.

<nav class="navbar navbar-expand-sm bg-light  text-dark">
    <div class="container">
        <!-- Links -->
        <ul class="navbar-nav">
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-secondary" href="" id="navbardrop" data-toggle="dropdown">Link</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 1</a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 2</a>
                </div>
            </li>
            <!-- Links -->
            <li class="nav-item">
                <a class="nav-link text-secondary" href="#">|Link</a>
            </li>
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-secondary" href="" id="navbardrop" data-toggle="dropdown">| Link</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 1</a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 2</a>
                </div>
            </li>
            <!-- Dropdown -->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle text-secondary" href="" id="navbardrop" data-toggle="dropdown">| Link</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 1 </a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 2 </a>
                    <a class="dropdown-item text-secondary" href="#">Dropdown Link 3 </a>
                                        
                    <a class="dropdown-item text-secondary" href="" id="navbardrop" data-toggle="dropdown">Submenu Link</a>
                    <div class="dropdown-submenu">
                        <div class="dropdown-menu">
                            <a class="dropdown-item text-secondary" href="#">Dropdown Submenu Link 1</a>
							<a class="dropdown-item text-secondary" href="#">Dropdown Submenu Link 2</a>
                        </div>
                    </div>
                </div>
            </li>
            <!-- Links -->
            <li class="nav-item">
                <a class="nav-link text-secondary" href="#">|Link</a>
            </li>
        </ul>
    </div>
</nav>

Комментарии:

  1. Denis
    Denis
    16.08.2018, 14:38
    Добрый день!
    Я использую, только Вашу сборку Gulp + «Owl Carousel 2».
    Подскажите как реализовать работу «submenu»?
    1. Александр Мальцев
      Александр Мальцев
      19.08.2018, 09:25
      Либо воспользоваться каким-то готовым плагином, либо добавить немного CSS и JavaScript. Например, так.
      1. Denis
        Denis
        19.08.2018, 18:41
        Большое спасибо за помощь!
    2. Александр Мальцев
      Александр Мальцев
      16.08.2018, 13:43
      Добрый! В Bootstrap 4 нет submenu. Какой плагин для этого используете?
      Войдите, пожалуйста, в аккаунт, чтобы оставить комментарий.