How to create a horizontal-scrolling nav in Bootstrap?

Question

As can be demonstrated in this fiddle, adding too many elements in a Bootstrap .nav causes it to just add items vertically down. How would I go about limiting its height and making it horizontally scrollable?

Answer 1

First you need to tell the ul to not wrap and overflow into a scroll bar. Then the li elements need to not be floated and display inline. This will do it:

ul.nav {
    white-space: nowrap;
    overflow-x: auto;
}

ul.nav li {
    display: inline-block;
    float: none;
}

Fiddle: http://jsfiddle.net/bmfcd3zt/8/