Dropdowns adjust their width to the width of their containing a elements - which have no line breaks ([*](f226463b05)). Consistent to this dropdown-headers also should be prevent to contain line breaks.
* Removes an old pair of selectors that didn’t properly target the
right-aligned navbar alignment of dropdown menus.
* Deprecates the `.pull-right` alignment in favor of a more specific
and unique class name.
* Adds `.dropdown-menu-right` as the new alignment class. This is then
mixin-ed into the `.navbar-right.navbar-nav` dropdown menus for
auto-alignment.
* To override that auto-alignment, use `.dropdown-menu-left` as needed.
* Now responsive by default (fits better with mobile-first approach)
* Requires `.nav-header` to group `.navbar-brand` and `.navbar-toggle`
for proper mobile display.
* Changed `.nav-collapse` to `.navbar-collapse`
* Simplified examples in docs
* Update `.nav-divider` mixin to simplify to a 1px line (one value
instead of two in parametric mixin)
* Rename and consolidate dropdown caret vars
* Add vars to Customizer
* Since we no longer have `.nav-list`, I've nuked the `.nav-header`
* However, dropdowns can still have section headings, so I've kept that
around with the addition of `.dropdown-header`
* Restyled it a smidge as well
* Add start and end support to the horizontal gradient as well
* Change all variables from camelCase to use-dashes
* Better comments in the gradients mixins area
* Update current uses of gradients in dropdowns and carousel to specify only two values by direct assignment of variables
* Remove border-radii on top of tab dropdown menus
* Remove the .dropdown and .dropup styles and instead place on all
* Use on dropdown carets intead of separately applying margin with a top alignment
* Some other misc cleanup
I have recently been experimenting with a lot of Typeahead controls, and I ran into a situation where my Typeahead was too wide for my screen, particularly on mobile devices, and it was not wrapping as I had expected it to do.
http://jsfiddle.net/Mtxkn/3/
Changing the CSS for `.dropdown-menu > li > a` to `white-space: normal` causes it to wrap in every scenario that I have seen, whereas leaving it as `nowrap` never does what I want when the text is too long for a given row.
It's possible that this has ramifications for other dropdown menus, but honestly I expect that even those would prefer to wrap than to extend the screen horizontally. If that is not the case, then it would work to change the typeahead version of this only:
```css
.typeahead > li > a {
white-space: normal;
}
```
Mostly doubling-up :hover styles to also cover :focus, as a first step
to making the framework more keyboard-friendly.
Additionally, fixed two small markup issues in the docs/examples to
make the "Learn more" large primary button-styled links
keyboard-focusable (as without href they're treated as non-tabable
anchors).
