Как создать раскрывающееся меню Bootstrap для полной ширины страницы?

Мне нужно изменить раскрывающееся меню, предоставленное в 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; }

и там у вас есть!

Ответ 1

Сначала вы не должны завершать компонент 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

Ответ 2

<li class="dropdown open" style="position: initial;">
<ul class="dropdown-menu" style="width: 100%;">

просто используйте позицию: начальная строка в основном ли (выпадающем) вашего навигатора и в раскрывающемся меню дочернего элемента ul 100%

Ответ 3

min-width раскрывающегося списка бутстрапов необходимо настроить, чтобы он работал.

Я работаю над устройствами, где выпадающему нужно изменить ширину в соответствии с шириной устройства. В принципе, для определенных точек останова должна быть полная ширина экрана.

using following{
width: 100vw;
min-width: 100vw
}