Source

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.

Eine von drei Säulen

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

	Extra klein <576px	Klein ≥576px	Mittel ≥768px	Groß ≥992px	Extra groß ≥1200px
Maximale Behälterbreite	Keine (automatisch)	540px	720px	960px	1140px
Klassenpräfix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# Spalten	12
Stegbreite	30px (15px auf jeder Seite einer Spalte)
Nestbar	Ja
Spaltenreihenfolge	Ja

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.

1 von 2

2 von 2

1 von 3

2 von 3

3 von 3

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

Mehrzeilig mit gleicher Breite

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 sie .w-100mit einigen reaktionsfähigen Anzeigedienstprogrammen mischen .

Es gab einen Flexbox-Fehler in Safari , der verhinderte, dass dies ohne explizites flex-basisoder funktionierte border. Es gibt Problemumgehungen für ältere Browserversionen, aber sie sollten nicht notwendig sein, wenn Ihre Zielbrowser nicht in die fehlerhaften Versionen fallen.

Kol

<div class="container">
  <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>
</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.

1 von 3

2 von 3 (breiter)

3 von 3

1 von 3

2 von 3 (breiter)

3 von 3

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

1 von 3

Inhalt mit variabler Breite

3 von 3

1 von 3

Inhalt mit variabler Breite

3 von 3

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

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.

Kol

col-8

col-4

<div class="container">
  <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>
</div>

Horizontal gestapelt

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

col-sm-8

col-sm-4

col-sm

<div class="container">
  <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>
</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.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

Dachrinnen

Dachrinnen können durch Breakpoint-spezifisches Padding und Utility-Klassen für negative Margen reaktionsschnell angepasst werden. Um die Bundstege in einer bestimmten Zeile zu ändern, koppeln Sie ein Dienstprogramm für einen negativen Rand auf dem .rowund ein entsprechendes Auffüllungs-Dienstprogramm auf dem .cols. Das .containeroder .container-fluid-Elternteil muss möglicherweise ebenfalls angepasst werden, um einen unerwünschten Überlauf zu vermeiden, indem erneut das passende Padding-Dienstprogramm verwendet wird.

Hier ist ein Beispiel für das Anpassen des Bootstrap-Rasters am großen lgHaltepunkt ( ) und darüber. Wir haben die .colPolsterung mit erhöht .px-lg-5, dem mit .mx-lg-n5auf dem Elternteil entgegengewirkt und dann den Wrapper mit .rowangepasst ..container.px-lg-5

Benutzerdefinierte Spaltenfüllung

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Zeilenspalten

Verwenden Sie die responsiven .row-cols-*Klassen, um schnell die Anzahl der Spalten festzulegen, die Ihren Inhalt und Ihr Layout am besten wiedergeben. Während für die einzelnen Spalten normale .col-*Klassen gelten (zB .col-md-4), werden die Zeilen-Spalten-Klassen .rowals Abkürzung auf den Parent gesetzt.

Verwenden Sie diese Zeilenspaltenklassen, um schnell grundlegende Rasterlayouts zu erstellen oder Ihre Kartenlayouts zu steuern.

Spalte

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Spalte

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Spalte

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Spalte

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Spalte

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Sie können auch das begleitende Sass-Mixin verwenden row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Ausrichtung

Verwenden Sie Flexbox-Ausrichtungsdienstprogramme, um Spalten vertikal und horizontal auszurichten. Internet Explorer 10-11 unterstützt keine vertikale Ausrichtung von Flex-Elementen, wenn der Flex-Container ein min-heightwie unten gezeigt hat. Siehe Flexbugs Nr. 3 für weitere Details.

Vertikale Ausrichtung

Eine von drei Säulen

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

Eine von drei Säulen

<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

Eine von zwei Spalten

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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.

.col-9

.col-4
Da 9 + 4 = 13 > 12, wird dieses 4 Spalten breite div als zusammenhängende Einheit in eine neue Zeile eingefügt.

.col-6
Nachfolgende Spalten werden entlang der neuen Zeile fortgesetzt.

<div class="container">
  <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>
</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.

.col-6 .col-sm-3

<div class="container">
  <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>
</div>

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

.col-6 .col-sm-4

<div class="container">
  <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>
</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.

Zuerst in DOM, keine Bestellung angewendet

Zweiter in DOM, mit einer größeren Bestellung

Dritter in DOM, mit einer Ordnung von 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </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.

Zuerst in DOM, zuletzt bestellt

Zweitens in DOM, ungeordnet

Dritter in DOM, zuerst bestellt

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <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>
</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 .

.col-sm-5 .col-md-6

.col-SM-5 .Offset-SM-2 .col-MD-6 .Offset-MD-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <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>
</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.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <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>
</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).

Ebene 1: .col-sm-9

Ebene 2: .col-8 .col-sm-6

Ebene 2: .col-4 .col-sm-6

<div class="container">
  <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>
</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);
  }
}

Hauptinhalt

Sekundärer Inhalt

<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-widthdie Breite für die Spaltenstege festgelegt wird.

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