如何将Bootstrap下拉菜单设置为全页宽？ [英] How to style Bootstrap dropdown-menu to be full page width?

问题描述

我需要修改Bootstrap中提供的下拉菜单，使用navbar-fixed-top，不会垂直但水平地显示 li {display：inline-block} （这很容易），但是我需要实际的 ul.dropdown-menu 来拉伸页面的整个宽度。我似乎无法想象出来。

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.

不要给我一个megamenu插件或任何东西，请，我怎么能解决它伸展的宽度整页？ （不是页面容器，窗口）

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)

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

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

所有人都知道如何做这个吗？

So does anyone know how to do this?

编辑：想出来（比如发布后5分钟）元素：

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

并且有它！

推荐答案

首先，你不应该将navbar组件包装在div.container中，然后使用以下代码更新css：

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

在这里检查演示 http://www.bootply.com/8EgGsi4F7w

这篇关于如何将Bootstrap下拉菜单设置为全页宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！