Ich bin kein Fan von Bootstrap's Standard Breakpoint von 1200px für screen-lg . Gibt es eine Möglichkeit, wie ich es machen kann, dass der lg Breakpoint bei 1800px oder etwas in dieser Richtung passiert? Ich möchte den ursprünglichen Bootstrap css-Code nicht ändern, da ich bower verwende, und jedes Mal, wenn ich bower update starte, verliere ich meine Änderungen.
Ich bekomme, dass ich in der Lage sein sollte, die Standardeinstellungen von Bootstrap zu überschreiben, obwohl ich Grunzer, Bower und Sass benutze, ich bin nicht sicher, wie ich das machen soll. Dies ist der <head> -Block:
Es stellte sich heraus, dass dies viel einfacher war, als ich dachte. Ich schwöre, ich habe es schon einmal versucht, aber es hat nicht funktioniert, aber vielleicht habe ich vorher etwas falsch gemacht.
Ändern Sie in der Haupt-SCSS-Datei ganz oben:
%Vor%Dazu:
%Vor% Aber, Bounty Punkte gehen zu Bass Jobsen für die ausführlichste Antwort, und auch für die richtige Weise der Einstellung der Containerbreite mit grid-gutter-width .
Sie können dies mit Less (auch SASS ich erwarte) und dem Kommandozeilen-Lessc-Compiler machen, indem Sie Folgendes ausführen:
%Vor%In der obigen 1770 = 1740 + Rinnengröße.
Beachten Sie, dass Sie nicht nur den Less-Compiler mit npm install less , sondern auch das Less-Autoprefixer-Plugin mit npm install less-plugin-autoprefix .
Das obige garantiert, dass Bootstrap in den gleichen Code wie beim Standard-Build-Prozess kompiliert wird. Natürlich können Sie auch die Quellkarte und die Komprimierungsoptionen festlegen, wenn Sie den obigen lessc-Befehl ausführen.
Die beste Lösung in Ihrer Situation hängt davon ab, wie Bootstrap kompiliert wird. Da Sie Bower verwenden, sollten Sie sich auch Ссылка ansehen. Dieses Plugin für den Less-Compiler hilft Ihnen, weniger Dateien aus Bower-Paketen zu importieren. Was zu einer alternativen Lösung führt.
Erstellen Sie eine neue weniger Datei, site.less , und notieren Sie den folgenden Less-Code:
Jetzt können Sie site.less mit dem folgenden Befehl kompilieren:
Die @screen-lg und @container-large-desktop können danach aufgrund von Less Lazy Loading außer Kraft gesetzt werden .
Nachdem ich die Antworten zu dieser Frage von @zangrafx und @mijopabe gelesen habe, frage ich mich auch, was Sie erwarten, wenn Sie den größten Breakpoint auf eine breitere Breite setzen. In der Standard Situation passiert folgendes:
Bei Bildschirmen, die breiter als 992px sind, wird die Breite der Klasse .container 970px und für Bildschirme größer als 1200px erhält die .container -Klasse eine Breite von 1170 Pixeln. Wenn Sie die Lösung implementieren, die ich oben angegeben habe, wird die Breite der .container -Klasse 970px für Bildschirmgrößen von 992px bis 1800px und 1770 Pixel für Bildschirmgrößen größer als 1800px. Möglicherweise suchen Sie nicht nach einer Lösung, die den größten Unterbrechungspunkt ändert, sondern nach einer Lösung, die fügt Bootstrap ein größeres Gitter hinzu .
Sie können Bootstrap-less-Variablen durchlaufen. Wenn Sie die Bootstrap Quelldateien heruntergeladen haben, finden Sie im Ordner eine Datei mit dem Namen variables.less . Suchen Sie hier nach die Datei
und ändern Sie es auf den Bildschirm, den Sie meinen. Dann kompilieren Sie und erhalten Sie das Ergebnis.
Wenn Sie die Bootstrap-Standarddateien nicht löschen / bearbeiten möchten, können Sie eine separate CSS-Datei (custom-bootstrap.css) erstellen, die Sie nach dem Bootstrap einbinden können. Also, für eine maximale Breite von 1800px, füge dies in diese custom-bootstrap.css-Datei ein:
%Vor%Dies überschreibt den Container-Flüssigkeitssatz in Bootstrap durch Zentrieren und Einstellen einer maximalen Breite horizontal.
Eine zweite Möglichkeit (unabhängig von der ersten) besteht darin, 1) eine zweite Hauptdatei (less / scss) zu erstellen, 2) was immer Sie von Bootstrap behalten möchten (also alle Responsive-Dateien ohne die responsive-1200px-min. weniger / scss). Dies wird ausführen, was Sie haben und 3) dann schreiben Sie Ihre eigene Medienabfrage für 1800px bei Bedarf.
Sie können Bootstrap anders verwenden. Kopieren Sie die Datei bootstrap.less vom ursprünglichen Speicherort in den Ordner less und ändern Sie die Pfade wie im folgenden Beispiel, mit Ausnahme von variables.less.
%Vor%Kopieren Sie jetzt die Datei variables.less vom ursprünglichen Speicherort in Ihren Ordner less, und Sie können jede gewünschte Variable ändern.
In Ihrem html-Änderungspfad zur neuen bootstrap.css-Datei:
%Vor%Kompilieren Sie in Ihrem Build-Prozess /your_less/bootstrap.less (anstelle von /bower_components/bootstrap/less/bootstrap.less) und es werden Ihre eigenen Variablen.less und alle anderen orginalen Bootstrap-Dateien von bower_components importiert.
Sie können auch andere weniger Dateien wie normalize.less gegen Ihre eigenen austauschen.
Ich habe diese Build und alles funktioniert gut mit Schluck, Quellkarten und Browser-Sync und ich kann Bootstrap in bower_files immer noch aktualisieren, wenn eine neue Version verfügbar ist.
Tags und Links twitter-bootstrap twitter-bootstrap-3