Adjust bootstrap dropdown menu based on page width
I came across this post searching for a fix to a slightly different problem. I have long entries in a drop-down menu that get cut off on small screen sizes.
I found that if I allow the content in the dropdown to wrap it automatically gets adjusted to the page width:

.dropdown-menu &gt; li &gt; a {
    white-space: normal;
}


If you don't want it to wrap if there is enough space, add no-wrap back in with a media query. Because it is so simple I figured I leave this here for others, even though it does not directly apply to the cascading dropdown in your example.