twitter/bootstrap — pull request #2895 by tierra (2012-04-01 19:12:11+00:00)
Title: Restrict navbar items that are collapsed to only those in .nav-collapse.

Please don't merge this PR as is, this is simply a proof of concept, it still needs some improvement.

In responsive Bootstrap layouts, the Navbar automatically hides any items contained within a .nav-collapse, and doesn't hide anything that isn't, however, it does still collapse *all* items. This restricts designs from making use of any components they may want to always show in the Navbar even on smaller screens. Such items are typically things like account login and logout links which can easily still fit in the Navbar at 240px wide screens, and should always be shown by default.

These changes scope the Navbar nav collapse styles to only those contained in .nav-collapse. With these changes, you can now still use (floated) dropdown menus (regular and button dropdowns) which can still be managed with other responsive styles and never hidden on any screen.

The starter-template.html example included in this PR illustrates how this can be used. Please note the differences between desktop and tablet Navbar components.

The only thing you have to account for now is making sure your content that isn't in a .nav-collapse comes before anything that is in the HTML code so it doesn't expand the navbar on mobile (which is exactly the technique used to keep the menu collapse button up top), but you can still float components in either direction of the navbar. This can be tough depending on what you need up top and on which side. What it comes down to is that you can't have anything that isn't in a .nav-collapse between two items that are collapsible. This is still much more flexible than how Bootstrap is before these changes though.

Issues remaining:

* Button dropdowns need additional style fixes for correct placement and alignment of dropdown menus.
* The .nav-collapse scoping used here could be better engineered to handle .nav-collapse class added to non-containing elements (directly added to btn-group for example).