如何设置Bootstrap下拉菜单的样式为整页宽度？

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

Answer 2

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

just use the position: initial in the main li(dropdown) of your nav and in the child ul dropdown-menu set width 100%

Answer 3

Check this

 .nav > li.dropdown.open { position: static; } .nav > li.dropdown.open .dropdown-menu { display: table; border-radius: 0px; width: 100%; text-align: center; left: 0; right: 0; } .dropdown-menu > li { display: table-cell; height: 50px; line-height: 50px; vertical-align: middle; } @media screen and (max-width: 767px) { .dropdown-menu > li { display: block; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <div class="navbar-brand">Blackcat</div> <button class="navbar-toggle" data-toggle="collapse" data-target=".btnCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse btnCollapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Shop</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Artist <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Rich</a></li> <li><a href="#">Shay</a></li> <li><a href="#">Jose</a></li> <li><a href="#">Marie</a></li> <li><a href="#">Simon</a></li> <li><a href="#">Jamie</a></li> <li><a href="#">Andrew</a></li> <li><a href="#">Teddie</a></li> </ul> </li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <!-- end container --> </div> <!-- end navbar navbar-inverse navbar-static-top --> <!-- container --> <div class="container"> <div class="row"> <p>Site content here...</p> </div> <!-- End row --> </div> <!-- End container -->