Grid-System

Verwenden Sie unser leistungsstarkes Flexbox-Grid für Mobilgeräte, um Layouts aller Formen und Größen zu erstellen, dank eines Zwölf-Spalten-Systems, fünf standardmäßigen reaktionsschnellen Ebenen, Sass-Variablen und Mixins sowie Dutzenden vordefinierter Klassen.

Wie es funktioniert

Das Rastersystem von Bootstrap verwendet eine Reihe von Containern, Zeilen und Spalten, um Inhalte anzuordnen und auszurichten. Es ist mit Flexbox gebaut und reagiert vollständig. Unten finden Sie ein Beispiel und einen detaillierten Blick darauf, wie das Raster zusammengesetzt wird.

Neu bei oder unbekannt mit flexbox? Lesen Sie diesen CSS-Tricks-Flexbox-Leitfaden für Hintergrundinformationen, Terminologie, Richtlinien und Code-Snippets.

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Das obige Beispiel erstellt drei gleich breite Spalten auf kleinen, mittleren, großen und extra großen Geräten unter Verwendung unserer vordefinierten Rasterklassen. Diese Spalten sind auf der Seite mit dem übergeordneten Element zentriert .container.

Aufschlüsseln, so funktioniert es:

• Container bieten eine Möglichkeit, den Inhalt Ihrer Website zu zentrieren und horizontal aufzufüllen. Verwenden Sie .containeres für eine ansprechende Pixelbreite oder .container-fluidfür width: 100%alle Darstellungsbereiche und Gerätegrößen.
• Zeilen sind Wrapper für Spalten. Jede Spalte hat paddingeine horizontale (Rinne genannt) zum Steuern des Abstands zwischen ihnen. Dem paddingwird dann auf den Zeilen mit negativen Margen entgegengewirkt. Auf diese Weise wird der gesamte Inhalt Ihrer Spalten visuell auf der linken Seite ausgerichtet.
• In einem Rasterlayout muss der Inhalt in Spalten platziert werden, und nur Spalten können unmittelbar untergeordnete Elemente von Zeilen sein.
• Dank Flexbox werden Rasterspalten ohne Angabe widthautomatisch als Spalten gleicher Breite angeordnet. Beispielsweise sind vier Instanzen von .col-smjeweils automatisch 25 % breit, beginnend mit dem kleinen Haltepunkt und darüber. Weitere Beispiele finden Sie im Abschnitt zum automatischen Layout von Spalten .
• Spaltenklassen geben die Anzahl der Spalten an, die Sie von den möglichen 12 pro Zeile verwenden möchten. Wenn Sie also drei Spalten gleicher Breite haben möchten, können Sie .col-4.
• Spalten widthwerden in Prozentsätzen festgelegt, sodass sie immer fließend und in der Größe relativ zu ihrem übergeordneten Element sind.
• Spalten müssen horizontal paddingsein, um die Stege zwischen einzelnen Spalten zu erstellen, Sie können jedoch die marginvon Zeilen und paddingvon Spalten mit .no-guttersauf entfernen .row.
• Um das Grid responsive zu machen, gibt es fünf Grid-Breakpoints, einen für jeden responsiven Breakpoint : alle Breakpoints (extra klein), klein, mittel, groß und extra groß.
• Grid Breakpoints basieren auf Medienabfragen mit minimaler Breite, was bedeutet, dass sie für diesen einen Breakpoint und alle darüber gelten (z. B. .col-sm-4gelten sie für kleine, mittlere, große und extra große Geräte, aber nicht für den ersten xsBreakpoint).
• Sie können vordefinierte Grid-Klassen (wie .col-4) oder Sass-Mixins für mehr semantisches Markup verwenden.

Beachten Sie die Einschränkungen und Fehler rund um Flexbox , wie die Unfähigkeit, einige HTML-Elemente als Flex-Container zu verwenden .

Rasteroptionen

Während Bootstrap ems oder rems zum Definieren der meisten Größen verwendet, pxwerden s für Gitterunterbrechungspunkte und Containerbreiten verwendet. Dies liegt daran, dass die Breite des Ansichtsfensters in Pixel angegeben wird und sich nicht mit der Schriftgröße ändert .

Sehen Sie anhand einer praktischen Tabelle, wie Aspekte des Bootstrap-Grid-Systems auf mehreren Geräten funktionieren.

Spalten mit automatischem Layout

Verwenden Sie Breakpoint-spezifische Spaltenklassen für eine einfache Spaltengröße ohne eine explizit nummerierte Klasse wie .col-sm-6.

Gleich breit

Hier sind zum Beispiel zwei Rasterlayouts, die für jedes Gerät und jeden Viewport gelten, von xsbis xl. Fügen Sie eine beliebige Anzahl von einheitenlosen Klassen für jeden benötigten Haltepunkt hinzu, und jede Spalte hat die gleiche Breite.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Spalten mit gleicher Breite können in mehrere Zeilen aufgeteilt werden, aber es gab einen Safari-Flexbox-Fehler , der verhinderte, dass dies ohne explizites flex-basisoder funktionierte border. Es gibt Problemumgehungen für ältere Browserversionen, aber sie sollten nicht notwendig sein, wenn Sie auf dem neuesten Stand sind.

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Einstellen einer Spaltenbreite

Auto-Layout für Flexbox-Gitterspalten bedeutet auch, dass Sie die Breite einer Spalte festlegen und die Größe der gleichgeordneten Spalten automatisch um sie herum anpassen können. Sie können vordefinierte Rasterklassen (wie unten gezeigt), Rastermixins oder Inline-Breiten verwenden. Beachten Sie, dass die Größe der anderen Spalten unabhängig von der Breite der mittleren Spalte geändert wird.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Inhalt mit variabler Breite

Verwenden Sie col-{breakpoint}-autoKlassen, um Spalten basierend auf der natürlichen Breite ihres Inhalts zu skalieren.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Gleichbreite mehrreihig

Erstellen Sie Spalten gleicher Breite, die sich über mehrere Zeilen erstrecken, indem .w-100Sie an der Stelle, an der die Spalten in eine neue Zeile umbrechen sollen, ein einfügen. Machen Sie die Unterbrechungen reaktionsschnell, indem Sie die .w-100mit einigen Hilfsprogrammen für responsive Anzeige mischen .

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Reaktionsfähige Klassen

Das Grid von Bootstrap umfasst fünf Ebenen vordefinierter Klassen zum Erstellen komplexer responsiver Layouts. Passen Sie die Größe Ihrer Spalten auf extra kleinen, kleinen, mittleren, großen oder extra großen Geräten an, wie Sie es für richtig halten.

Alle Haltepunkte

Verwenden Sie für Grids, die vom kleinsten bis zum größten Gerät gleich sind, die Klassen .colund . .col-*Geben Sie eine nummerierte Klasse an, wenn Sie eine besonders große Spalte benötigen; andernfalls können Sie sich gerne daran halten .col.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Horizontal gestapelt

Mit einem einzigen Satz von .col-sm-*Klassen können Sie ein grundlegendes Rastersystem erstellen, das gestapelt beginnt, bevor es am kleinen Haltepunkt ( sm) horizontal wird.

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mischen und Anpassen

Möchten Sie nicht, dass Ihre Säulen einfach in einigen Rasterebenen gestapelt werden? Verwenden Sie nach Bedarf eine Kombination verschiedener Klassen für jede Ebene. Sehen Sie sich das Beispiel unten an, um eine bessere Vorstellung davon zu bekommen, wie alles funktioniert.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Ausrichtung

Verwenden Sie Flexbox-Ausrichtungsdienstprogramme, um Spalten vertikal und horizontal auszurichten.

Vertikale Ausrichtung

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horizontale Ausrichtung

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Keine Dachrinnen

Die Stege zwischen den Spalten in unseren vordefinierten Rasterklassen können mit entfernt werden .no-gutters. Dadurch wird das negative margins aus .rowund die Horizontale paddingaus allen unmittelbar untergeordneten Spalten entfernt.

Hier ist der Quellcode zum Erstellen dieser Stile. Beachten Sie, dass Spaltenüberschreibungen nur auf die ersten untergeordneten Spalten beschränkt sind und über den Attributselektor anvisiert werden . Während dies einen spezifischeren Selektor generiert, kann die Spaltenauffüllung noch weiter mit Abstandsdienstprogrammen angepasst werden .

Benötigen Sie ein Edge-to-Edge-Design? Löschen Sie das übergeordnete Element .containeroder .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

In der Praxis sieht es so aus. Beachten Sie, dass Sie dies weiterhin mit allen anderen vordefinierten Rasterklassen verwenden können (einschließlich Spaltenbreiten, Reaktionsebenen, Neuordnungen und mehr).

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Spaltenumbruch

Wenn mehr als 12 Spalten in einer einzelnen Zeile platziert werden, wird jede Gruppe zusätzlicher Spalten als eine Einheit in eine neue Zeile umbrochen.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Spaltenbrüche

Das Umbrechen von Spalten in eine neue Zeile in Flexbox erfordert einen kleinen Hack: Fügen Sie ein Element hinzu, width: 100%wo immer Sie Ihre Spalten in eine neue Zeile umbrechen möchten. Normalerweise wird dies mit mehreren .rows erreicht, aber nicht jede Implementierungsmethode kann dies berücksichtigen.

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Sie können diese Unterbrechung auch an bestimmten Unterbrechungspunkten mit unseren responsiven Anzeigedienstprogrammen anwenden .

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Neuordnung

Klassen bestellen

Verwenden Sie .order-Klassen, um die visuelle Reihenfolge Ihrer Inhalte zu steuern. Diese Klassen sind responsiv, also können Sie den orderBreakpoint by setzen (zB .order-1.order-md-2). Beinhaltet Unterstützung für 1Through 12über alle fünf Grid-Ebenen.

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Es gibt auch responsive .order-firstund .order-lastKlassen, die die ordereines Elements ändern, indem sie order: -1bzw. order: 13( order: $columns + 1) anwenden. Diese Klassen können bei Bedarf auch mit den nummerierten .order-*Klassen gemischt werden.

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Spalten versetzen

Sie können Grid-Spalten auf zwei Arten ausgleichen: unsere responsiven .offset-Grid-Klassen und unsere Margin-Dienstprogramme . Grid-Klassen sind so bemessen, dass sie mit Spalten übereinstimmen, während Ränder nützlicher für schnelle Layouts sind, bei denen die Breite des Offsets variabel ist.

Offset-Klassen

Spalten mithilfe von .offset-md-*Klassen nach rechts verschieben. Diese Klassen vergrößern den linken Rand einer Spalte spaltenweise *. .offset-md-4Bewegt sich beispielsweise .col-md-4über vier Spalten.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Zusätzlich zum Löschen von Spalten an reaktionsfähigen Haltepunkten müssen Sie möglicherweise Offsets zurücksetzen. Sehen Sie dies im Rasterbeispiel in Aktion .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Margin-Dienstprogramme

Mit der Umstellung auf Flexbox in v4 können Sie Margin-Utilities verwenden, um z . B. gleichgeordnete .mr-autoSpalten voneinander weg zu zwingen.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Verschachtelung

Um Ihren Inhalt mit dem Standardraster zu verschachteln, fügen Sie eine neue Spalte .rowund eine Reihe von .col-sm-*Spalten innerhalb einer vorhandenen .col-sm-*Spalte hinzu. Verschachtelte Zeilen sollten eine Reihe von Spalten enthalten, die zusammen maximal 12 ergeben (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sass-Mixins

Wenn Sie die Sass-Quelldateien von Bootstrap verwenden, haben Sie die Möglichkeit, Sass-Variablen und Mixins zu verwenden, um benutzerdefinierte, semantische und responsive Seitenlayouts zu erstellen. Unsere vordefinierten Rasterklassen verwenden dieselben Variablen und Mixins, um eine ganze Reihe von gebrauchsfertigen Klassen für schnell ansprechende Layouts bereitzustellen.

Variablen

Variablen und Zuordnungen bestimmen die Anzahl der Spalten, die Bundstegbreite und den Medienabfragepunkt, an dem schwebende Spalten beginnen sollen. Wir verwenden diese, um die oben dokumentierten vordefinierten Grid-Klassen sowie für die unten aufgeführten benutzerdefinierten Mixins zu generieren.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Mixins

Mixins werden in Verbindung mit den Grid-Variablen verwendet, um semantisches CSS für einzelne Grid-Spalten zu generieren.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Beispielnutzung

Sie können die Variablen auf Ihre eigenen benutzerdefinierten Werte ändern oder einfach die Mixins mit ihren Standardwerten verwenden. Hier ist ein Beispiel für die Verwendung der Standardeinstellungen zum Erstellen eines zweispaltigen Layouts mit einer Lücke dazwischen.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Anpassen des Rasters

Mit unseren integrierten Grid-Sass-Variablen und -Maps ist es möglich, die vordefinierten Grid-Klassen vollständig anzupassen. Ändern Sie die Anzahl der Ebenen, die Abmessungen der Medienabfrage und die Containerbreiten – und kompilieren Sie dann neu.

Säulen und Dachrinnen

Die Anzahl der Grid-Spalten kann über Sass-Variablen modifiziert werden. $grid-columnswird verwendet, um die Breiten (in Prozent) jeder einzelnen Spalte zu generieren, während $grid-gutter-widthhaltepunktspezifische Breiten zulässig sind, die gleichmäßig über padding-leftund padding-rightfür die Spaltenstege verteilt sind.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Gitterebenen

Über die Spalten selbst hinaus können Sie auch die Anzahl der Rasterebenen anpassen. Wenn Sie nur vier Grid-Tiers wollten, würden Sie $grid-breakpointsund $container-max-widthsauf etwas wie folgt aktualisieren:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Wenn Sie Änderungen an den Sass-Variablen oder -Maps vornehmen, müssen Sie Ihre Änderungen speichern und neu kompilieren. Dadurch wird ein brandneuer Satz vordefinierter Rasterklassen für Spaltenbreiten, Versätze und Reihenfolge ausgegeben. Responsive Sichtbarkeitsdienstprogramme werden ebenfalls aktualisiert, um die benutzerdefinierten Haltepunkte zu verwenden. Stellen Sie sicher, dass Rasterwerte in px(nicht rem, em, oder %) eingestellt sind.