Gibt es eine Möglichkeit, den Punkt zu erhöhen, an dem die Bootstrap 3-Navigationsleiste zusammenbricht (dh so, dass sie auf Portrait-Tablets zu einem Dropdown zusammenfällt)?
Diese beiden waren auf Bootstrap 2 anwendbar, aber nicht jetzt!
Ändern Sie den standardmäßigen reaktionsfähigen Haltepunkt der Navigationsleiste
Antworten:
Ich hatte heute das gleiche Problem.
Bootstrap 4
Es ist eine native Funktionalität: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors
Sie müssen
.navbar-expand{-sm|-md|-lg|-xl}
Klassen verwenden:Bootstrap 3
Ändern Sie einfach
991px
durch1199px
fürmd
Größen.Demo
quelle
.navbar-collapse.collapse.in { display: block!important; }
, um zu verhindern, dass es verschwindet. Gute Arbeit, hat mir Stunden gespart.dropdown-menu
Elemente in der Navigationsleiste zu behandeln .Der große Unterschied zwischen Bootstrap 2 und Bootstrap 3 besteht darin, dass Bootstrap 3 "Mobile First" ist.
Das bedeutet, dass die Standardstile für mobile Geräte entwickelt wurden. Bei Navbars bedeutet dies, dass sie standardmäßig "reduziert" und "erweitert" werden, wenn eine bestimmte Mindestgröße erreicht ist.
Die Website von Bootstrap 3 enthält tatsächlich einen "Hinweis", was zu tun ist: http://getbootstrap.com/components/#navbar
Wenn Sie Ihre WENIGER neu kompilieren möchten, finden Sie die angegebene WENIGER-Variable in der
variables.less
Datei. Es ist derzeit auf "Erweitern" eingestellt,@media (min-width: 768px)
was ein "kleiner Bildschirm" (dh ein Tablet) nach Bootstrap 3-Begriffen ist.@grid-float-breakpoint: @screen-tablet;
Wenn Sie den kollabierten etwas länger halten möchten, können Sie ihn wie folgt einstellen:
@grid-float-breakpoint: @screen-desktop;
(992px Haltepunkt)oder früher erweitern
@grid-float-breakpoint: @screen-phone
(480px Haltepunkt)Wenn Sie möchten, dass es später erweitert wird und sich nicht mit dem erneuten Kompilieren von LESS befasst, müssen Sie die Stile, die bei der
768px
Medienabfrage angewendet werden, überschreiben und zum vorherigen Wert zurückkehren lassen. Fügen Sie sie dann zum richtigen Zeitpunkt erneut hinzu.Ich bin mir nicht sicher, ob es einen besseren Weg gibt. Der beste (einfachste) Weg ist es, den Bootstrap WENIGER nach Ihren Wünschen neu zu kompilieren. Andernfalls müssen Sie alle CSS-Medienabfragen finden, die sich auf Ihre Navigationsleiste auswirken, sie auf Standardstile mit einer Breite von 768 Pixel überschreiben und sie dann mit einer höheren Mindestbreite zurücksetzen.
Das Neukompilieren des WENIGER wird all diese Magie für Sie tun, indem Sie einfach die Variable ändern. Welches ist so ziemlich der Punkt von LESS / SASS Pre-Compilern. =)
(Beachten Sie, dass ich sie alle nachgeschlagen habe. Es sind ungefähr 100 Codezeilen, was für mich ärgerlich genug ist, die Idee fallen zu lassen und Bootstrap für ein bestimmtes Projekt neu zu kompilieren und zu vermeiden, dass versehentlich etwas durcheinander gebracht wird.)
Ich hoffe das hilft!
Prost!
quelle
/css
,/js
,/fonts
. Wenn Sie es anpassen, erhalten Sie nur die kompilierten Dateien, die Sie ausgewählt haben.Am einfachsten ist es, den Bootstrap anzupassen
Variable finden:
Mit der Einstellung @ screen-sm können Sie es Ihren Anforderungen entsprechend ändern. Ich hoffe es hilft!
quelle
Diese werden in Variablen gesteuert, ohne dass in der Quelle herumgespielt werden muss. Versuchen Sie mit Bootstrap zuerst Variablen und überschreiben Sie sie dann. dann gehe zurück und versuche es erneut mit Variablen;)
Ich habe Bootstrap-Sass mit Schienen verwendet, aber es ist das gleiche mit dem Standard WENIGER.
das ist es! Diese Referenzseite für Variablen ist sehr praktisch: https://github.com/twbs/bootstrap/blob/master/less/variables.less
quelle
Dank Seb33300 habe ich das zum Laufen gebracht. Ein wichtiger Teil scheint jedoch zu fehlen. Zumindest in Bootstrap Version 3.1.1.
Mein Problem war, dass die Navigationsleiste bei der richtigen Breite entsprechend zusammenfiel, aber die Menüschaltfläche nicht funktionierte. Ich konnte das Menü nicht erweitern und reduzieren.
Dies liegt daran, dass die Collapse.in-Klasse durch das in .navbar-kollaps.collapse! Das Beispiel von Seb33300 wurde unten vervollständigt:
quelle
Ich wollte die Antwort von jmbertucci positiv bewerten und kommentieren, aber den Kontrollen ist mir noch nicht vertraut. Ich hatte das gleiche Problem und löste es, wie er sagte. Wenn Sie Bootstrap 3.0 verwenden, bearbeiten Sie die WENIGER Variablen in variables.less. Die ansprechenden Haltepunkte werden um Zeile 200 festgelegt:
Stellen Sie dann den Reduzierungswert für die Navigationsleiste mit der Variablen @ grid-float-breakpoint auf ungefähr Zeile 232 ein. Standardmäßig ist @ screen-tablet festgelegt . Wenn Sie möchten, können Sie einen Pixelwert verwenden, aber ich bevorzuge die Verwendung der WENIGER Variablen.
quelle
-min
: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ grid-float-breakpoint: @ screen-md-min;Wenn das Problem darin besteht, dass das Menü in mehrere Zeilen unterteilt ist , können Sie eine der folgenden Möglichkeiten ausprobieren:
1) Versuchen Sie, die Anzahl der Menüelemente oder deren Länge zu verringern, z. B. das Entfernen von Menüelementen oder das Kürzen der Wörter.
2) Reduzieren Sie den Abstand zwischen den Menüelementen wie folgt:
Die Standardauffüllung beträgt 15px auf beiden Seiten (links und rechts).
Wenn Sie es vorziehen, jede einzelne Seite zu wechseln, verwenden Sie:
Diese Einstellung wirkt sich auch auf die Dropdown-Liste aus.
Dies beantwortet die Frage nicht, könnte aber anderen helfen, die sich nicht mit dem CSS herumschlagen oder WENIGER Variablen verwenden möchten. Die beiden gängigen Ansätze zur Lösung dieses Problems.
quelle
Der Nabvar wird auf kleinen Geräten zusammenbrechen. Der Punkt des Reduzierens wird durch @ grid-float-breakpoint in Variablen definiert. Standardmäßig wird dies vor 768px sein. Bei Bildschirmen unterhalb der Bildschirmbreite von 768 Pixel sieht die Navigationsleiste folgendermaßen aus:
Es ist möglich, den @ grid-float-breakpoint in variables.less zu ändern und Bootstrap neu zu kompilieren. Dabei müssen Sie auch @ screen-xs-max in navbar.less ändern. Sie müssen diesen Wert auf Ihren neuen @ grid-float-breakpoint -1 setzen. Siehe auch: https://github.com/twbs/bootstrap/pull/10465 . Dies ist erforderlich, um Navigationsleistenformulare und Dropdowns am @ grid-float-breakpoint auch auf ihre mobile Version zu ändern.
quelle
Ich bin besorgt über Wartungs- und Upgrade-Probleme nach dem Anpassen von Bootstrap. Ich kann die Anpassungsschritte heute dokumentieren und hoffe, dass die Person, die Bootstrap in drei Jahren aktualisiert, die Dokumentation findet und die Schritte erneut anwendet (die zu diesem Zeitpunkt möglicherweise funktionieren oder nicht). Ich nehme an, es kann so oder so argumentiert werden, aber ich bevorzuge es, Anpassungen in meinem Code beizubehalten.
Ich verstehe jedoch nicht ganz, wie der Ansatz von Seb33300 funktionieren kann. Mit Bootstrap 4.0.3 hat es sicherlich nicht funktioniert. Damit die Navigationsleiste bei 1200 anstelle von 768 erweitert werden kann, müssen die Regeln für beide Medienabfragen überschrieben werden, um eine Erweiterung bei 768 zu verhindern und eine Erweiterung bei 1200 zu erzwingen.
Ich habe ein längeres Menü, das im Porträtmodus auf dem iPad angezeigt wird. Im Folgenden wird das Menü bis zum Haltepunkt 1200 reduziert:
quelle
Ich habe das CSS mit meiner Installation von Bootstrap 3.0.0 gemacht, da ich mit LESS nicht so vertraut bin. Hier ist der Code, den ich meiner benutzerdefinierten CSS-Datei hinzugefügt habe (die ich nach bootstrap.css lade), mit der ich steuern konnte, dass das Menü immer wie ein Menü funktionierte
accordion
.Hinweis: Ich habe mein gesamtes
navbar
in ein div mit der Klasse eingeschlossensidebar
, um das gewünschte Verhalten zu trennen, damit es keine Auswirkungen auf andere Navigationsleisten auf meiner Site hat, wie z. B. das Hauptmenü. Passen Sie sich Ihren Bedürfnissen an und hoffen Sie, dass dies hilfreich ist.Zusätzlicher Hinweis: Ich habe auch das Umschalten des Hauptmenüs geändert
navbar
(da der obige Code auf meiner Site für ein "Untermenü" an der Seite verwendet wird.Ich habe mich verändert:
in:
Und dann auch angepasst:
in:
Wenn Sie nur eine haben,
navbar
brauchen Sie sich darüber keine Sorgen zu machen, aber es hat mir in meinem Fall geholfen.quelle
Und für diejenigen, die mit einer Breite von weniger als 768 Pixel zusammenklappen möchten (mit einer Breite von weniger als 768 Pixel erweitern), ist dies das erforderliche CSS:
quelle
Ich glaube, ich habe eine einfache Lösung gefunden, um den Kollaps-Haltepunkt nur durch CSS zu ändern.
Ich hoffe, andere können es bestätigen, da ich es nicht gründlich getestet habe und nicht sicher bin, ob diese Lösung Nebenwirkungen hat.
Sie müssen die Medienabfragewerte für die folgenden Klassendefinitionen ändern:
Dies hat bei meinem aktuellen Projekt funktioniert, aber ich muss noch einige CSS-Definitionen ändern, um das Menü für alle Bildschirmgrößen richtig anzuordnen.
Hoffe das hilft.
quelle