Beispiele für Bootstrap- Raster
Nachfolgend haben wir einige Beispiele für grundlegende Bootstrap-Grid-Layouts zusammengestellt.
Drei gleiche Spalten
Das folgende Beispiel zeigt, wie Sie drei Spalten gleicher Breite erhalten, beginnend bei Tablets und bis hin zu großen Desktops skalieren. Auf Mobiltelefonen werden die Spalten automatisch gestapelt:
Beispiel
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Drei ungleiche Spalten
Das folgende Beispiel zeigt, wie Sie drei Spalten unterschiedlicher Breite erhalten, beginnend bei Tablets und skaliert auf große Desktops:
Beispiel
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Zwei ungleiche Spalten
Das folgende Beispiel zeigt, wie Sie zwei unterschiedlich breite Spalten beginnend bei Tablets erhalten und auf große Desktops skalieren:
Beispiel
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Keine Dachrinnen
Verwenden Sie die .row-no-guttersKlasse, um die Bundstege aus einer Zeile und ihren Spalten zu entfernen:
Beispiel
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Zwei Spalten mit zwei verschachtelten Spalten
Das folgende Beispiel zeigt, wie Sie zwei Spalten beginnend bei Tablets erhalten und auf große Desktops skalieren, mit zwei weiteren Spalten (gleiche Breite) innerhalb der größeren Spalte (bei Mobiltelefonen werden diese Spalten und ihre verschachtelten Spalten gestapelt):
Beispiel
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Gemischt: Mobil und Desktop
Das Bootstrap-Grid-System hat vier Klassen: xs (Telefone), sm (Tablets), md (Desktops) und lg (größere Desktops). Die Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.
Tipp: Jede Klasse wird hochskaliert, wenn Sie also die gleichen Breiten für xs und sm festlegen möchten, müssen Sie nur xs angeben.
Beispiel
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Tipp: Denken Sie daran, dass die Summe der Rasterspalten zwölf für eine Zeile ergeben sollte. Darüber hinaus werden Spalten unabhängig vom Ansichtsfenster gestapelt.
Gemischt: Mobil, Tablet und Desktop
Beispiel
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Schwimmer löschen
Löschen Sie Floats (mit der .clearfixKlasse) an bestimmten Haltepunkten, um ein seltsames Umbrechen mit ungleichmäßigem Inhalt zu verhindern:
Beispiel
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Spalten versetzen
Spalten mithilfe von .col-md-offset-*Klassen nach rechts verschieben. Diese Klassen vergrößern den linken Rand einer Spalte um * Spalten:
Beispiel
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Push and Pull - Spaltenreihenfolge ändern
Ändern Sie die Reihenfolge der Rasterspalten mit .col-md-push-*und
.col-md-pull-*Klassen:
Beispiel
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>