How To Restrict Width of Bootstrap 3 Dropdown-Menu in Navbar
I would like to prevent the Bootstrap .dropdown-menu from ever being wider than the main nav bar (which I have restricted to be the width of the .containe
-
Explanation
Bootstrap's adds position: absolute to the
.dropdown-menuclass. As you may know, all absolutely positioned elements are positioned in relation to the first parent element they find withposition: relative. In Bootstrap, this is provided by the .dropdown wrapperSo if you want to position the element relative to the container, and not the nav item, we'll have to remove relative positioning from the
.dropdownwrapper. You can do this by resetting the value to the initial value for the position property, which isstatic.Congratulations! The menu is no longer constrained by the
.dropdownelement, but we still have some work to do.Because bootstrap was not intending to space constrain the menu, menu items are given the property
white-space: nowrapso they'll extend as long as they need. Think lines of code inside code blocks here on stack overflow (1 line = 1 line). Since we want the line to eventually end, this won't do. So we'll reset the anchor tags back towhite-space: normal.At this point the .dropdown-menu should take up the full size of the .navbar (which itself takes up the full size of the
.container). This is where yamm3 is doing something really cool. It sets left: auto on the dropdown-menu.According to MDN on the left property:
autois a keyword that represents:
for absolutely positioned elements, the position of the element based on therightproperty and treatwidth: autoas a width based on the content.So setting the
.dropdown-menutoleft:autowill cause the menu to start in its current location and extend all the way to the right of the container.Just Codes
Just add the
.fill-widthclass to your.dropdownelement and include the following CSS:.fill-width.dropdown { position: static; } .fill-width.dropdown > .dropdown-menu { left: auto; } .fill-width.dropdown > .dropdown-menu > li > a { white-space: normal; }Working Demo in jsFiddle
.full-width.dropdown { position: static; } .full-width.dropdown > .dropdown-menu { right: 0; } .full-width.dropdown > .dropdown-menu > li > a { white-space: normal; } .fill-width.dropdown { position: static; } .fill-width.dropdown > .dropdown-menu { left: auto; } .fill-width.dropdown > .dropdown-menu > li > a { white-space: normal; }讨论(0)
加载中...
- 热议问题