Säulen
Erfahren Sie, wie Sie Spalten mit einer Handvoll Optionen für Ausrichtung, Anordnung und Versatz dank unseres Flexbox-Rastersystems ändern können. Sehen Sie sich außerdem an, wie Sie Spaltenklassen verwenden, um die Breite von Nicht-Rasterelementen zu verwalten.
Wie sie arbeiten
-
Spalten bauen auf der Flexbox-Architektur des Grids auf. Flexbox bedeutet, dass wir Optionen zum Ändern einzelner Spalten und zum Ändern von Spaltengruppen auf Zeilenebene haben . Sie wählen aus, wie Spalten wachsen, schrumpfen oder sich anderweitig ändern.
-
Beim Erstellen von Rasterlayouts wird der gesamte Inhalt in Spalten eingefügt. Die Hierarchie des Bootstrap-Rasters reicht vom Container über die Zeile bis zur Spalte zu Ihrem Inhalt. In seltenen Fällen können Sie Inhalt und Spalte kombinieren, aber seien Sie sich bewusst, dass dies unbeabsichtigte Folgen haben kann.
-
Bootstrap enthält vordefinierte Klassen zum Erstellen schneller, reaktionsschneller Layouts. Mit sechs Haltepunkten und einem Dutzend Spalten auf jeder Rasterebene haben wir bereits Dutzende von Klassen für Sie erstellt, um Ihre gewünschten Layouts zu erstellen. Dies kann auf Wunsch über Sass deaktiviert werden.
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 class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</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.
Da 9 + 4 = 13 > 12, wird dieses 4 Spalten breite div als zusammenhängende Einheit in eine neue Zeile eingefügt.
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 > 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 .row
s erreicht, aber nicht jede Implementierungsmethode kann dies berücksichtigen.
<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 .
<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 order
Breakpoint by setzen (zB .order-1.order-md-2
). Beinhaltet Unterstützung für 1
Through 5
über alle sechs Grid-Ebenen.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
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 reaktionsschnelle .order-first
und .order-last
Klassen, die die order
eines Elements ändern, indem sie order: -1
bzw. anwenden order: 6
. 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 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-4
Bewegt sich beispielsweise .col-md-4
über vier Spalten.
<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 .
<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 .me-auto
Spalten voneinander weg zu zwingen.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Eigenständige Spaltenklassen
Die .col-*
Klassen können auch außerhalb von verwendet werden .row
, um einem Element eine bestimmte Breite zu geben. Immer wenn Spaltenklassen als nicht direkte Kinder einer Zeile verwendet werden, werden die Paddings weggelassen.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
Die Klassen können zusammen mit Dienstprogrammen verwendet werden, um ansprechende schwebende Bilder zu erstellen. Stellen Sie sicher, dass Sie den Inhalt in einen .clearfix
Wrapper einschließen, um den Float zu löschen, wenn der Text kürzer ist.
Ein Absatz mit Platzhaltertext. Wir verwenden es hier, um die Verwendung der clearfix-Klasse zu zeigen. Wir fügen hier einige bedeutungslose Phrasen hinzu, um zu demonstrieren, wie die Spalten hier mit dem schwebenden Bild interagieren.
Wie Sie sehen können, wickeln sich die Absätze elegant um das schwebende Bild. Stellen Sie sich nun vor, wie dies mit einigen tatsächlichen Inhalten hier aussehen würde, anstatt nur mit diesem langweiligen Platzhaltertext, der endlos weitergeht, aber eigentlich keine greifbaren Informationen vermittelt. Es nimmt einfach Platz weg und sollte eigentlich nicht gelesen werden.
Und doch lesen Sie hier immer noch beharrlich diesen Platzhaltertext und hoffen auf weitere Einblicke oder ein verstecktes Osterei an Inhalten. Ein Witz vielleicht. Leider gibt es hier nichts davon.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>