Bootstrap 3 Dynamiczne zwijanie paska nawigacyjnego

Szukam rozwiązania problemu zmiany rozmiaru z paskiem nawigacyjnym bootstrap.

Obecnie navbar może mieć efekt „nakładania się”, zanim zostanie skompaktowany. (Zdaję sobie sprawę, że wynika to z zapytań o media)

Zapytania o media są tutaj używane do dyktowania, kiedy iść kompaktowo, jednak szukam rozwiązania, które spowoduje, że navbar zmieni rozmiar TYLKO wtedy, gdy nie ma miejsca między '.navbar-nav' a '.navbar-right'.

Jest to istotne, ponieważ „.navbar-nav” i „.navbar-right” mają dynamiczne szerokości. (innymi słowy, czasami „.navbar-nav” będzie zawierać od 1 elementu listy do 5 elementów listy. „.navbar-right” jest podobne, ponieważ jest to ciąg tekstu, który może mieć od 3 znaków do potencjalnie 100 znaków) długo lub nawet dłużej.

Poniżej znajduje się przykład plunkera, w którym poprzez zmianę rozmiaru okienka podglądu można zobaczyć niezamierzone „nakładanie się” zachodzące (ponieważ czeka na spełnienie zapytania medialnego o maksymalnej szerokości).

http://plnkr.co/edit/7r5fNX2JyJUuT0PvVPDf?p=preview

Jak mogę sprawić, że będzie zagęszczony tylko wtedy, gdy „.navbar-nav” i „.navbar-right” nie mają między sobą miejsca (powiedzmy… 5px przestrzeni między sobą lub czegoś podobnego)?

(proszę zauważyć, że dostosowanie punktów przerwania nie wystarczy, aby to osiągnąć)

questionAnswers(4)

yourAnswerToTheQuestion