Ich suche nach einer Lösung für ein Größenänderungsproblem mit der Navigationsleiste von bootstrap.

Derzeit kann eine Navigationsleiste eine Art Überlappungseffekt haben, bevor sie komprimiert wird. (Mir ist bekannt, dass dies auf Medienanfragen zurückzuführen ist.)

Medienabfragen werden hier verwendet, um festzulegen, wann kompakt vorgegangen werden soll. Ich suche jedoch nach einer Lösung, bei der die Größe der Navigationsleiste NUR geändert wird, wenn zwischen ".navbar-nav" und ".navbar-right" kein Platz mehr vorhanden ist.

Dies ist wichtig, da '.navbar-nav' und '.navbar-right' dynamische Breiten haben. (Mit anderen Worten, manchmal enthält '.navbar-nav' zwischen 1 Listenelement und 5 Listenelementen. '.navbar-right' ist insofern ähnlich, als es sich um eine Textfolge handelt, die zwischen 3 und möglicherweise 100 Zeichen lang sein kann lang oder noch länger.

Unten sehen Sie ein Beispiel für einen Plunker, bei dem Sie durch Ändern der Größe des Vorschaufensters sehen können, wie sich das Medium unbeabsichtigt überlappt (während auf die Erfüllung der Medienabfrage mit maximaler Breite gewartet wird).

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

Wie kann ich es nur komprimieren lassen, wenn zwischen '.navbar-nav' und '.navbar-right' kein Platz ist (sagen wir, 5px Platz dazwischen oder ähnliches)?

(Bitte beachten Sie, dass das Anpassen der Haltepunkte nicht ausreicht.)