Ich habe Twitter Bootstrap verwendet, um eine Website mit der festen Containerklasse zu entwickeln, aber jetzt möchte der Client, dass die Website 1000 Pixel breit und nicht 1170 Pixel groß ist. Ich benutze die .less-Dateien nicht.
Gibt es eine schnelle Möglichkeit, dies zu beheben?
twitter-bootstrap
Alex
quelle
quelle
Antworten:
Gehen Sie zum Abschnitt Anpassen auf der Bootstrap-Site und wählen Sie die gewünschte Größe. Sie müssen
@gridColumnWidth
und@gridGutterWidth
Variablen setzen.Zum Beispiel:
@gridColumnWidth = 65px
und@gridGutterWidth = 20px
Ergebnisse in einem1000px
Layout.Dann laden Sie es herunter.
quelle
Hier ist die Lösung:
Dies hat gegenüber der Anpassung von Bootstrap wie in der Antwort von @ Bastardo den Vorteil , dass die Bootstrap-Datei nicht geändert wird. Wenn Sie beispielsweise ein CDN verwenden, können Sie den größten Teil von Bootstrap weiterhin vom CDN herunterladen.
quelle
Sie binden einen hinter Ihrem Rücken und sagen, dass Sie die WENIGER-Dateien nicht verwenden werden. Ich habe mein erstes Twitter Bootstrap-Design mit 2.0 erstellt und alles in CSS erledigt - eine override.css-Datei erstellt. Es dauerte Tage, bis die Dinge richtig funktionierten.
Jetzt haben wir 3.0. Lassen Sie mich Ihnen versichern, dass das Erlernen von WENIGER weniger Zeit in Anspruch nimmt, was ziemlich einfach ist, wenn Sie mit CSS vertraut sind, als all diese verrückten CSS-Überschreibungen. Änderungen wie die gewünschte vorzunehmen ist ein Kinderspiel.
In Bootstrap 3.0 steuert die Containerklasse die Breite, und alle enthaltenen Stile werden angepasst, um den Container zu füllen. Die Variablen für die Containerbreite befinden sich am Ende der Datei variables.less.
Einige Websites haben entweder nicht genügend Inhalt, um das 1020-Display zu füllen, oder Sie möchten aus ästhetischen Gründen einen schmaleren Rahmen. Da BS ein 12-Spalten-Raster verwendet, verwende ich ein Vielfaches wie 960.
quelle
@container-sm
,@container-md
und@container-lg
(jetzt)@mcbjam hat diese Antwort bereits gegeben, aber hier ist ein bisschen mehr Erklärung.
Sie können die Änderung einfach mithilfe einer Medienabfrage in Ihrer CSS-Datei vornehmen, ohne BS herunterladen zu müssen. Ich habe das gerade gemacht und es funktioniert wunderbar.
Der Wert "min-width" der Medienabfrage weist CSS an, die Breite Ihres Containers nur auf Bildschirmen mit einer Größe von mehr als 1200px (oder einer beliebigen Breite, die Sie dort einschließen möchten) auf 1000px zu ändern . Dadurch bleibt die Reaktionsfähigkeit Ihrer Website erhalten. Wenn die Bildschirmgröße unter diesen Wert springt (kleinerer Monitor, Tablet, Smartphone usw.), wird Ihre Website weiterhin an die kleineren Bildschirme angepasst.
quelle
Für Bootstrap 4, wenn Sie Sass verwenden, ist hier die zu bearbeitende Variable
Um diese Variable zu überschreiben, habe ich vor dem Importieren von Bootstrap $ container-max-widths ohne! Standard in meiner .sass-Datei deklariert.
Hinweis: Ich musste nur den xl-Wert ändern, damit ich nicht über Haltepunkte nachdenken konnte.
quelle
Legen Sie Ihre eigene Inhaltscontainerklasse mit der Eigenschaft 1000px width fest und verwenden Sie dann container-fluid Boostrap-Klasse anstelle des Containers.
Funktioniert, ist aber möglicherweise nicht die beste Lösung.
quelle
Verwenden Sie einen Wrapper-Selektor und erstellen Sie einen Container mit einer Breite von 100% innerhalb dieses Wrappers, um die gesamte Seite zu kapseln.
Jetzt ist die maximale Breite auf 1000px eingestellt und Sie benötigen nicht weniger oder sass.
quelle
Behältergrößen
Ändern Sie im Abschnitt Behältergrößen
1140
in970
Ich hoffe es hilft dir.
Vielen Dank für Ihre Richtigkeit. Link zum Anpassen des Bootstraps: https://getbootstrap.com/docs/3.4/customize/
quelle
Fügen Sie dieses Stück CSS in Ihr CSS-Styling ein. Es ist besser, dies nach dem Hinzufügen der Bootstrap-CSS-Datei hinzuzufügen, um dieselbe zu überschreiben.
quelle