Bootstrap: Wie ändere ich die Breite des Containers?

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?

Gehen Sie zum Abschnitt Anpassen auf der Bootstrap-Site und wählen Sie die gewünschte Größe. Sie müssen @gridColumnWidthund @gridGutterWidthVariablen setzen.

Zum Beispiel: @gridColumnWidth = 65pxund @gridGutterWidth = 20pxErgebnisse in einem 1000pxLayout.

Dann laden Sie es herunter.

Hier ist die Lösung:

@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

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.

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.

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:            ((720px + @grid-gutter-width));

// Medium screen / desktop
@container-desktop:           ((940px + @grid-gutter-width));

// Large screen / wide desktop
@container-lg-desktop:        ((1020px + @grid-gutter-width));

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.

@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.

@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }
}

Für Bootstrap 4, wenn Sie Sass verwenden, ist hier die zu bearbeitende Variable

// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;

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.

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.

Verwenden Sie einen Wrapper-Selektor und erstellen Sie einen Container mit einer Breite von 100% innerhalb dieses Wrappers, um die gesamte Seite zu kapseln.

<style>#wrapper {width: 1000px;} 
#wrapper .container {max-width: 100%; display: block;}</style>
<body>
<div id="wrapper">
  <div class="container">
    <div class="row">....

Jetzt ist die maximale Breite auf 1000px eingestellt und Sie benötigen nicht weniger oder sass.

Behältergrößen

@container-large-desktop
(1140px + @grid-gutter-width) -> (970px + @grid-gutter-width)

Ändern Sie im Abschnitt Behältergrößen 1140in970

Ich hoffe es hilft dir.

Vielen Dank für Ihre Richtigkeit. Link zum Anpassen des Bootstraps: https://getbootstrap.com/docs/3.4/customize/

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.

html, body {
 height: 100%;
 max-width: 100%;
 overflow-x: hidden;
}`