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

Question

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

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

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

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

任何意见,将不胜感激!

Answer 1

对于.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;    
}

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

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

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