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.

Auf dieser Seite

Kopf hoch! Lesen Sie unbedingt zuerst die Rasterseite, bevor Sie sich damit befassen, wie Sie Ihre Rasterspalten ändern und anpassen können.

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

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

.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 5über alle sechs 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-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-firstund .order-lastKlassen, die die ordereines Elements ändern, indem sie order: -1bzw. anwenden order: 6. 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 .me-autoSpalten voneinander weg zu zwingen.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

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

.col-3: Breite von 25 %

.col-sm-9: Breite von 75 % über dem sm-Breakpoint

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