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

Question

我需要修改Bootstrap中提供的下拉菜单，使用navbar-fixed-top，在悬停时不li { display: inline-block }而是水平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; }

你有它！

Answer 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

Answer 2

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

只需使用位置：导航的主要li（下拉列表）中的初始位置和子级ul下拉菜单中的设置宽度100％

Answer 3

检查一下

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