Although it can be complicated markup, the Bootstrap navbar does have lots of features.  Unfortunately, the component does not handle menu overflow, as stated within a warning box on the official Bootstrap site.

Generally, the content wraps decently except for when the navbar contains specific navbar-left and navbar-right elements.  When that happens, the navbar-right element appears at the top and the navbar-left element appears below.

Try this out:

@media (min-width:768px) {
 .navbar-left {
 max-width: 90%;
 }
}

With that CSS snippet, you can keep the navbar-left/right elements on the same line.  Of course, you would change the max-width to accommodate your situation.