Wie kann ich Spalten in Bootstrap 4 responsiv anordnen?

Spalten mit Bootstrap 4 anordnen

Spalten für responsive Layouts neu anordnen

Bootstrap 4 bietet eine vereinfachter Mechanismus zum Anordnen von Spalten über verschiedene Bildschirmgrößen hinweg. In diesem Artikel werden die verschiedenen Methoden untersucht, um dies zu erreichen.

Bootstrap 4.1

Mit der Einführung von Flexbox in Bootstrap 4.1 ist die Spaltenreihenfolge einfacher geworden. Mit den Order-Utility-Klassen können Sie jetzt die gewünschte Spaltenreihenfolge angeben, die von order-1 bis order-12 reicht. Eine reaktionsfähige Sortierung kann durch die Kombination dieser Klassen erreicht werden, z. B. order-md-12 order-2, wodurch die Spalte auf mittelgroßen Bildschirmen (XXL, XL, LG, MD) an letzter Stelle und auf besonders kleinen Bildschirmen (XS) an zweiter Stelle positioniert wird.

Beispiel:

<div class="row">
  <div class="col-3 col-md-6">1</div>
  <div class="col-6 col-md-12 order-2 order-md-12">3</div>
  <div class="col-3 col-md-6 order-3">2</div>
</div>

Bootstrap 4

Vor Bootstrap 4.1 basierte die Spaltenreihenfolge auf den Push- und Pull-Klassen. Diese Klassen wurden in Bootstrap 4 geändert und folgen der Syntax: push-{viewport}-{units} und pull-{viewport}-{units}. Um das gewünschte 1-3-2-Layout auf mobilen/extra kleinen Bildschirmen zu erreichen, würden die folgenden Klassen verwendet:

Beispiel:

<div class="row">
  <div class="col-xs-3 col-md-6">1</div>
  <div class="col-xs-3 col-md-6">2</div>
  <div class="col-xs-6 col-md-12 push-xs-6">3</div>
</div>

Hinweis:Diese Methode ist in Bootstrap 4.1 veraltet.

Flexbox Richtungsdienstprogramme

Zusätzlich zu den Ordnungsdienstprogrammen bietet Bootstrap 4.1 auch die Klassen flex-column-reverse und flex-md-row. Mit diesen Klassen können Sie die Richtung der Spalten auf verschiedenen Bildschirmgrößen ändern. Beispielsweise ordnet der folgende Code die Spalten auf mobilen Bildschirmen vertikal und auf mittelgroßen und größeren Bildschirmen horizontal an:

Beispiel:

<div class="row flex-column-reverse flex-md-row">
  <div class="col-md-8">2</div>
  <div class="col-md-4">1st on mobile</div>
</div>

Das obige ist der detaillierte Inhalt vonWie kann ich Spalten in Bootstrap 4 responsiv anordnen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!