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
Bootstrap's adds position: absolute to the .dropdown-menu class. As you may know, all absolutely positioned elements are positioned in relation to the first parent element they find with position: relative. In Bootstrap, this is provided by the .dropdown wrapper
So 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 .dropdown wrapper. You can do this by resetting the value to the initial value for the position property, which is static.
Congratulations! The menu is no longer constrained by the .dropdown element, 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: nowrap so 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 to white-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-menu to left:auto will cause the menu to start in its current location and extend all the way to the right of the container.
Just add the .fill-width class to your .dropdown element 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;
}
.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;
}