Выпадающее меню выпадающего списка Bootstrap отсутствует

Bootstrap 3 все еще находится на RC, но я просто пытался его реализовать. Я не мог понять, как поставить class подменю. Даже нет classа в css, и даже новые документы ничего не говорят об этом

Он был там в 2.x с именем classа как выпадающее меню

    Обновлено 2018

    dropdown-submenu было удалено в Bootstrap 3 RC. По словам автора Bootstrap Марка Отто ..

    «Подменю просто не имеют большого количества места в Интернете прямо сейчас, особенно в мобильной сети. Они будут удалены с 3.0″ – https://github.com/twbs/bootstrap/pull/6342

    Но с небольшим дополнительным CSS вы можете получить ту же функциональность.

    Bootstrap 4 (подменю navbar при наведении)

     .navbar-nav li:hover > ul.dropdown-menu { display: block; } .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; } 

    Выпадающее меню подменю Navbar
    Выпадающий павильон подменю Navbar (выравнивание по правому краю)
    Выпадающее меню подменю Navbar (выравнивание по правому краю)
    Выпадающий павильон Navbar (нет подменю)


    Бутстрап 3

    Вот пример, который использует 3.0 RC 1: http://bootply.com/71520

    Вот пример использования Bootstrap 3.0.0 (окончательный): http://bootply.com/86684

    CSS

     .dropdown-submenu { position:relative; } .dropdown-submenu>.dropdown-menu { top:0; left:100%; margin-top:-6px; margin-left:-1px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { display:block; } .dropdown-submenu>a:after { display:block; content:" "; float:right; width:0; height:0; border-color:transparent; border-style:solid; border-width:5px 0 5px 5px; border-left-color:#cccccc; margin-top:5px; margin-right:-10px; } .dropdown-submenu:hover>a:after { border-left-color:#ffffff; } .dropdown-submenu.pull-left { float:none; } .dropdown-submenu.pull-left>.dropdown-menu { left:-100%; margin-left:10px; -webkit-border-radius:6px 0 6px 6px; -moz-border-radius:6px 0 6px 6px; border-radius:6px 0 6px 6px; } 

    Образец разметки

      

    PS – Пример в навигационной панели, которая регулирует левую позицию: http://bootply.com/92442

    Решение @skelly – это хорошо, но не будет работать на мобильных устройствах, поскольку состояние зависания не будет работать.

    Я добавил немного JS, чтобы вернуть поведение BS 2.3.2.

    PS: он будет работать с CSS, который вы получите там: http://bootply.com/71520, хотя вы можете прокомментировать следующую часть:

    CSS:

     /*.dropdown-submenu:hover>.dropdown-menu{display:block;}*/ 

    JS:

     $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { // Avoid following the href location when clicking event.preventDefault(); // Avoid having the menu to close when clicking event.stopPropagation(); // If a menu is already open we close it $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open'); // opening the one you clicked on $(this).parent().addClass('open'); }); 

    Результат можно найти в моей теме WordPress (вверху страницы): http://shprinkone.julienrenaux.fr/

    До сегодняшнего дня (9 января 2014 года) Bootstrap 3 все еще не поддерживает выпадающее меню подменю.

    Я искал Google об адаптивном меню навигации и нашел, что это лучший вариант.

    Это умные меню http://www.smartmenus.org/

    Надеюсь, это выход для тех, кто хочет меню навигации с многоуровневым подменю.

    update 2015-02-17 В меню Smart теперь полностью поддерживается стиль элемента Bootstrap для подменю. Для получения дополнительной информации посетите веб-сайт Smart menus.

    Код Shprink помог мне больше всего, но чтобы избежать выпадающего экрана, я обновил его, чтобы:

    JS:

     $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { // Avoid following the href location when clicking event.preventDefault(); // Avoid having the menu to close when clicking event.stopPropagation(); // If a menu is already open we close it $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open'); // opening the one you clicked on $(this).parent().addClass('open'); var menu = $(this).parent().find("ul"); var menupos = $(menu).offset(); if (menupos.left + menu.width() > $(window).width()) { var newpos = -$(menu).width(); menu.css({ left: newpos }); } else { var newpos = $(this).parent().width(); menu.css({ left: newpos }); } }); 

    CSS: FROM background-color: #eeeeee В background-color: # c5c5c5 – белый шрифт и светлый фон выглядели не очень хорошо.

     .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #c5c5c5; border-color: #428bca; } 

    Надеюсь, это поможет людям так же, как и для меня!

    Но я надеюсь, что Bootstrap добавит функцию субтитров как можно скорее.

    Комментарий к очень .pull-left Skelly : в Bootstrap-sass 3.3.6, utilities.scss, строка 19: .pull-left имеет float:left !important .pull-left . С тех пор я рекомендую использовать! Важно и в его CSS:

     .dropdown-submenu.pull-left { float:none !important; } 

    Я столкнулся с этим вопросом несколько дней назад. Я пробовал много решений, и ни один из них не работал для меня в конце, я закончил создание extenion / override выпадающего кода bootstrap. Это копия исходного кода с изменениями функции closeMenus.

    Я думаю, что это хорошее решение, поскольку оно не влияет на основные classы bootstrap js.

    Вы можете проверить это на gihub: https://github.com/djokodonev/bootstrap-multilevel-dropdown

    Я делаю другое решение для выпадающего списка. Надеюсь, что это полезно. Просто добавьте этот скрипт js

      
    Давайте будем гением компьютера.