in English

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

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 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>

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

<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

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset-Klassen

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

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

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

.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

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

.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

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

Level 1: .col-sm-9

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

Level 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

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variablen

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

$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 are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

// 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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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