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

Question

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

Here is a demo: 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 ;-)

Any advice would be appreciated!

Answer 1

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

    .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.