Javascript 在Bootstrap 2.3.2中创建一个全页面宽度下拉列表

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

下面是一个演示：

所以，当你点击一个下拉区域时，下拉列表将是一条边到边的直线，但我不太明白如何到达那里

如果我在px中指定一个特定的宽度，我可以让它工作，但这意味着我会从左向右滚动等等，这是不好的；-）

---

任何建议都将不胜感激

对于.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。请记住，由于我们正在覆盖引导样式，因此使用这些样式的任何页面都将被覆盖。

这是具有正确样式的新fork。我不得不添加一些新的自定义样式来定位箭头相对于单击的菜单项，而不是实际的下拉菜单：很抱歉对旧帖子发表评论，但是当使用position fixed时，如何让下拉菜单与其余内容一起滚动？我的菜单栏不使用固定顶。明白了！必须使其父母的立场：静态。