how to avoid bootstrap 3 nav bar collapsing into two rows

Question

When I resize the window to a medium size the two links on the right collapse and cause the navbar to take two rows even though there is enough space between the right links and the left links.

http://www.bootply.com/fthRQCpN7d

Answer 1

You could write a @media-query to reduce the left/right padding when it hits the offending breakpoint:

@media(max-width:992px){
.nav>li>a {
padding-left: 10px;
padding-right:10px
    }
}

May not work for every instance, but seems to for your example: http://www.bootply.com/fthRQCpN7d