html - 如何将 Bootstrap 下拉菜单设置为全页宽度？

Question

我需要使用 navbar-fixed-top 修改 Bootstrap 中提供的下拉菜单，使其在悬停时不是垂直显示而是水平显示 li { display: inline-block } (这很简单) ，但是我需要实际的 ul.dropdown-menu 来拉伸(stretch)页面的整个宽度。我似乎无法弄清楚。

请不要给我一个 megamenu 插件或任何东西，我怎样才能修复它以拉伸(stretch)整个页面的宽度？ (也不是页面容器，窗口)

实际上，可能还需要包装另一个元素，因为 ul 需要居中。

那么有人知道怎么做吗？

编辑:想通了(大约在发布后 5 分钟)并且没有添加元素:

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

好了!

Answer 1

首先，您不应该将导航栏组件包装在 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