Question

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

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

如果我在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。请记住，由于我们重写了引导程序样式，因此任何使用这些样式的页面也将被覆盖。

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

1 个答案: