Мне нужно изменить раскрывающееся меню, предоставленное в Bootstrap, используя navbar-fixed-top, чтобы отображаться при наведении не вертикально, а горизонтально li { display: inline-block } (это легко), но для этого мне нужно фактическое ul.dropdown-menu растянуть полную ширину страницы. Кажется, я не понимаю.
Не давайте мне плагин megamenu или что-нибудь еще, пожалуйста, как я могу его исправить, чтобы растянуть ширину всей страницы? (не контейнер страницы, окно)
Вероятно, потребуется также обернуть еще один элемент, так как ul должен быть центрирован.
Так кто-нибудь знает, как это сделать?
РЕДАКТИРОВАТЬ: отобразите его (например, через 5 минут после публикации) и без добавленных элементов:
.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }
и там у вас есть!
Сначала вы не должны завершать компонент navbar в div.container, а затем обновлять css следующим кодом:
.nav > li.dropdown.open {
position: static;
}
.nav > li.dropdown.open .dropdown-menu {
display:table; width: 100%; text-align: center; left:0; right:0;
}
.dropdown-menu>li {
display: table-cell;
}
проверьте демо здесь http://www.bootply.com/8EgGsi4F7w
<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">
просто используйте позицию: начальная строка в основном ли (выпадающем) вашего навигатора и в раскрывающемся меню дочернего элемента ul 100%
min-width раскрывающегося списка бутстрапов необходимо настроить, чтобы он работал.
Я работаю над устройствами, где выпадающему нужно изменить ширину в соответствии с шириной устройства. В принципе, для определенных точек останова должна быть полная ширина экрана.
using following{
width: 100vw;
min-width: 100vw
}