Derzeit wechselt die Navigationsleiste in den reduzierten Modus, wenn die Browserbreite unter 768px fällt. Ich möchte diese Breite auf 1000px ändern. Wenn der Browser unter 1000px liegt, wechselt die Navigationsleiste in den reduzierten Modus. Ich möchte dies tun, ohne WENIGER zu verwenden. Ich verwende einen Stift, der nicht WENIGER ist.
Mein Problem ist das gleiche wie in dieser Frage: Bootstrap 3 Navbar Collapse
Alle Antworten in diesen Fragen erklären jedoch, wie dies durch Ändern der Variablen WENIGER zu tun ist. Ich habe mich nicht mit WENIGER befasst, ich benutze einen Stift, also möchte ich wissen, wie dies mit einem Stift oder einer anderen Methode gemacht werden kann.
Vielen Dank!
collapse
Klasse ist wichtig für mobile Bildschirme. Wenn die Breite unter 768px liegt, wird die Navigationsleiste angezeigtdisplay:none
, sodass die erforderliche Aktion innerhalb der Markierungen 768 und 1000 angewendet wird ...navbar-collapse.collapse
gibtdisplay: block !important
. Das Deaktivieren führt dazu, dass die Schaltfläche zumcollapse
2018 UPDATE
Bootstrap 4
Das Ändern des Navigationsleisten-Haltepunkts ist in Bootstrap 4 mithilfe der folgenden
navbar-expand-*
Klassen einfacher :<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= mobiles Menü auf xs-Bildschirmen <576pxnavbar-expand-md
= mobiles Menü auf sm-Bildschirmen <768pxnavbar-expand-lg
= mobiles Menü auf MD-Bildschirmen <992pxnavbar-expand-xl
= mobiles Menü auf LG-Bildschirmen <1200pxnavbar-expand
= Verwenden Sie niemals das mobile Menü(no expand class)
= immer mobiles Menü verwendenWenn Sie
navbar-expand-*
das mobile Menü ausschließen, wird es inall
Breiten verwendet. Hier ist eine Demo aller 6 Navbar-Zustände: Bootstrap 4 Navbar-BeispielSie können auch einen benutzerdefinierten Haltepunkt (??? px) verwenden, indem Sie ein wenig CSS hinzufügen. Zum Beispiel hier ist 1300px ..
Bootstrap 4 Individuelle Navbar Breakpoint-
Bootstrap 4 Navbar Breakpoint- Beispiele
Bootstrap 3
Für Bootstrap 3.3.x ist hier das funktionierende CSS zum Überschreiben des Navigationsleisten-Haltepunkts. Wechseln Sie
991px
in die Pixelgröße des Punkts, an dem die Navigationsleiste zusammenfallen soll ...Arbeitsbeispiel für 991px: http://www.bootply.com/j7XJuaE5v6
Arbeitsbeispiel für 1200px: https://www.codeply.com/go/VsYaOLzfb4 (mit Suchformular)
Hinweis: Das Obige funktioniert für alles über 768px . Wenn Sie es auf weniger als 768px ändern müssen, finden Sie hier das Beispiel von weniger als 768px .
quelle
Ändern Sie in bootstrap3 diese Variable @ grid-float-breakpoint in die gewünschte. Der Standardwert ist 768px
quelle
@grid-float-breakpoint
ist im Compiler definiert: getbootstrap.com/customize - der Standardwert ist,@screen-sm-min
aber Sie können ihn in ändern1234px
.Schließlich wurde unter http://getbootstrap.com/customize/ herausgefunden, wie Sie die Kollapsbreite ändern können, indem Sie mit '@ grid-float-breakpoint' herumspielen .
Gehen Sie zu Zeile 2923 in bootstrap.css (auch Min-Version) und wechseln Sie
@media screen and (min-width: 768px) {
zu@media screen and (min-width: 1000px) {
Der Code lautet also:
quelle
@grid-float-breakpoint
in meinenresponsive.less
Arbeiten für mich geändert !Ich habe dies gerade erfolgreich mit dem folgenden CSS-Code gemacht.
quelle
Im Bootstrap 3. WENIGER Quellcode ist eine Variable definiert, die in
variables.less
aufgerufen definiert@grid-float-breakpoint
ist und den folgenden hilfreichen Kommentar enthält:Der Übereinstimmungswert
@grid-float-breakpoint-max
wird auf minus 1px gesetzt:Lösung:
Setzen Sie den
@grid-float-breakpoint
Wert stattdessen einfach auf 1000px und erstellen Sie ihn neubootstrap.less
inbootstrap.css
:z.B
quelle
$ lessc bootstrap.less bootstrap.css
aber nichts ist passiertgrunt dist
dem das dist-Verzeichnis neu erstellt wird. Sie führen diesen Befehl in dem Verzeichnis aus, in dem Sie Ihre gruntfile.js haben. Referenz: getbootstrap.com/getting-started/#gruntDie Sass-Methode zum Ändern von Bootstrap-Variablen ist tatsächlich auf der Bootstrap-Sass- Github-Seite dokumentiert.
Definieren Sie einfach die Variablen neu, bevor Sie @import bootstrap:
quelle
Fügen Sie zusätzlich zu @Skely answer auch die zu überschreibenden Klassen hinzu , damit Dropdown-Menüs in der Navigationsleiste funktionieren. Letzter Code unten:
Demo-Code
quelle
In Bootstrap v4 kann die Navigation früher oder später mithilfe verschiedener CSS-Klassen reduziert werden
z.B:
Mit der Schaltfläche zur Navigation:
quelle
navbar-toggleable-sm
für mich zu gehen ,xs
macht es nie umschalten. Könnte sein, dass ich etwas falsch mache. Vielen Dank!Für Bootstrap 3.3 ist dies der einzige Code, den Sie benötigen:
quelle
Das hat bei mir Bootstrap3 geklappt
Es hat eine Weile gedauert, um diese beiden herauszufinden:
quelle
Am besten verwenden Sie einen Port des von Ihnen verwendeten CSS-Prozessors.
Ich bin ein großer Fan von SASS, daher verwende ich derzeit https://github.com/thomas-mcdonald/bootstrap-sass
Es sieht so aus, als gäbe es hier eine Gabel für Stylus: https://github.com/Acquisio/bootstrap-stylus
Ansonsten ist Search & Replace Ihr bester Freund direkt in der CSS-Version ...
quelle
Hallo, ich denke, Sie können es mit CSS wie diesem tun. Sie können das Haltepunkt-Bootstrap-Menü ändern
quelle
Navbars können die Klassen .navbar-toggler, .navbar-Collapse und .navbar-expand {-sm | -md | -lg | -xl} verwenden, um Änderungen vorzunehmen, wenn ihr Inhalt hinter einer Schaltfläche zusammenfällt. In Kombination mit anderen Dienstprogrammen können Sie leicht auswählen, wann bestimmte Elemente ein- oder ausgeblendet werden sollen.
Fügen Sie für Navigationsleisten, die niemals zusammenbrechen, die Klasse .navbar-expand zur Navigationsleiste hinzu. Fügen Sie für Navigationsleisten, die immer zusammenbrechen, keine .navbar-expand-Klasse hinzu.
Zum Beispiel :
Das mobile Menü wird auf einem großen Bildschirm angezeigt.
Referenz: https://getbootstrap.com/docs/4.0/components/navbar/
quelle
Das hat mir den Trick getan:
quelle
In Bootstrap 4 müssen Sie diesen Stil / diese Definition in bootstrap.css finden und in Ihrem neu definieren, wenn Sie Navbar-expand- * überschreiben, erweitern und reduzieren sowie den Hamburger (navbar-toggler) anzeigen und ausblenden möchten eigene customstyle.css (oder direkt in bootstrap.css, wenn Sie so geneigt sind).
Z.B. Ich wollte, dass der navbar-expand-lg zusammenbricht und den navbar-toggler bei 950px zeigt. In bootstrap.css finde ich:
Und darunter ...
Ich habe beide @ media-Abfragen kopiert und in meine style.css eingefügt und dann die Größe an meine Bedürfnisse angepasst. In meinem Fall wollte ich, dass es bei 950px zusammenbricht. Die @ media-Abfragen müssen unterschiedliche Größen haben (ich vermute), daher habe ich die maximale Breite des Containers auf 949,98 Pixel festgelegt und 950 Pixel für die andere @ media-Abfrage verwendet. Daher wurde der folgende Code an meine style.css angehängt. Dies war nicht leicht von verdrehten Lösungen zu trennen, die ich bei Stackoverflow und anderswo gefunden hatte. Hoffe das hilft.
quelle
Hier mein Arbeitscode mit in React with Bootstrap
quelle
Es wird jetzt von Bootstrap 4.4 unterstützt
quelle