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.