Bootstrap 4 - Submenu

Denis
Denis
4,1K
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>

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

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