Die beste Methode, Bootstrap 3 Navbar zu erstellen, ohne Text zu umbrechen (und nicht zu kollabieren)
Ich versuche, eine Navbar mit Bootstrap 3 zu erstellen, die den Text nicht reduziert oder umschließt . Ich möchte, dass der Text einfach abgeschnitten wird (oder Ellipsen) anstatt zu umbrechen - so bleibt die Navbar in einer einzelnen Zeile, ohne vertikal zu expandieren . (Diese Navbar wird verwendet, um den aktuellen Ansichtsort mit einem einzelnen rechts ausgerichteten Menü anzuzeigen.)
In etwa so:
%Vor%Wie gezeigt, habe ich mit CSS-Float-, Overflow- und Whitespace-Einstellungen geblödelt und finde nicht die richtige Kombination. Außerdem benutze ich zwei Navbar-Header-Elemente, um das Zusammenfalten zu vermeiden, aber ich bin offen für andere Optionen, wenn es einen besseren Weg gibt.
Danke für die Hilfe.
4 Antworten
Hier ist eine feste Version, die großartig funktioniert: Ссылка
%Vor%Ich muss mit dem Prozentsatz auf den kleineren Breiten herumspielen, um den Menübereich zu berücksichtigen. Machen Sie eine minimale Breite und Sie werden es herausfinden. Vielleicht fügen Sie etwas Polsterung hinzu, um es nicht zu verdecken. Ich werde später, heute oder morgen, darüber sprechen.
Wenn Sie javascript / jquery erlauben; füge den Überlauf-Header zu deinem .pull-linken div hinzu; <div class="navbar-header pull-left" style="overflow: hidden;">
und benutze dies:
%Vor%Siehe: Ссылка Beachten Sie, dass Sie bei dieser Lösung eine Neuberechnung der Bildschirmgröße vornehmen müssen.
Wenn Sie Ihrem rechten Navigationsgerät eine feste Breite geben und ccs3 erforderlich machen möchten, können Sie das Gleiche tun mit:
%Vor%Siehe auch: Ссылка
Tags und Links html css twitter-bootstrap twitter-bootstrap-3