Bootstrap 4 - Submenu

Denis
Denis
4.3K
4
Добрый день! Нужна помощь, не правильно работает 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>

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

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