在Bootstrap 2.3.2中创建整页宽度下拉列表

I am trying to get the dropdown menu in Bootstrap 2.3.2 to be full screen.

我想让Bootstrap 2.3.2中的下拉菜单全屏显示。

Here is a demo: http://bootply.com/100126

这是一个演示:http://bootply.com/100126

So when you click on a drop down area, the dropdown will be edge to edge single line but I can't quite figure out how to get there.

因此,当您点击下拉区域时,下拉列表将是边对边的单行,但我无法弄清楚如何到达那里。

If I specify a certain width in px I can get it to work but means I get left to right scroll etc. and that is not ok ;-)

如果我在px中指定一定的宽度我可以让它工作,但意味着我从左到右滚动等等,这是不行的;-)

Any advice would be appreciated!

任何意见,将不胜感激!

1 个解决方案

#1

For your .dropdown-menu style, set the position property to fixed, and the top property to 40px as shown below:

对于.dropdown菜单样式,将position属性设置为fixed,将top属性设置为40px,如下所示:

    .dropdown-menu {
position: fixed !important;
display: block;
float: left;
left: 0 !important;
top: 40px;
height: 35px;
z-index: 1000;
display: none;
list-style: none;
width: 100%;
background-color: #58e137;
}

//the following style is left in from your code
.dropdown-menu li {
float:left;    
}

Then, these styles will override bootstrap styles for the default position of the little drop-down arrow, and position them relative to the menu item clicked on rather than the actual drop-down menu:

然后,这些样式将覆盖小下拉箭头的默认位置的引导样式,并相对于单击的菜单项而不是实际的下拉菜单定位它们:

//custom style
    .navbar .nav li.open:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
bottom: -4px;
left: 9px;
z-index: 2000;
}

//custom style
.navbar .nav li.open:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
bottom: -3px;
left: 10px;
z-index: 2000;
}

//bootstrap override
.navbar .nav>li>.dropdown-menu:before {
content: '';
display: inline-block;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 9px;
}

//bootstrap override
.navbar .nav>li>.dropdown-menu:after {
content: '';
display: inline-block;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid #ffffff;
position: absolute;
top: -6px;
left: 10px;
}

This should work for all drop-down menus without needing to add any JavaScript to position elements. Just remember that since we are overriding the bootstrap styles, any page that uses these styles will also be over-ridden.

这应该适用于所有下拉菜单,而无需向位置元素添加任何JavaScript。请记住,由于我们重写了引导程序样式,因此使用这些样式的任何页面也将被覆盖。

#1