html - How to style Bootstrap dropdown-menu to be full page width?

Question

I need to modify the dropdown-menu provided in Bootstrap, using the navbar-fixed-top, to appear on hover not vertically but horizontally li { display: inline-block } (that's easy), but so I need the actual ul.dropdown-menu to stretch the full width of the page. I can't seem to figure it out.

Don't give me a megamenu plugin or anything, please, just how can I fix it to stretch the width of the whole page? (not the page container either, the window)

Will probably need to wrap another element too, actually, as the ul needs to be centered.

So does anyone know how to do this?

EDIT: Figured it out (like 5 minutes after posting this) and with no added elements:

.nav { margin-bottom: 0; }
.dropdown { position: static; }
.dropdown-menu { width: 100%; text-align: center; }
.dropdown-menu>li { display: inline-block; }

and there you have it!

Answer 1

First you shouldn't wrap the navbar component in a div.container then update the css with the following Code:

.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;
}

check the demo here http://www.bootply.com/8EgGsi4F7w