Wie kann ich Spalten in Bootstrap 4 neu anordnen?

Spalten über Bootstrap4 anordnen

Die Neuordnung von Spalten in Bootstrap4 kann mit verschiedenen Techniken erreicht werden, abhängig von den Anforderungen und der verwendeten Version von Bootstrap.

Bootstrap 4.1 (Aktuelle Version)**

Bootstrap 4.1 hat eine neue Version eingeführt Satz reaktionsfähiger Bestellklassen: order-first, order-last und order-0 bis order-12. Diese Klassen ermöglichen mehr Flexibilität bei der Steuerung der Spaltenreihenfolge auf verschiedenen Bildschirmgrößen.

Um Spalten in der gewünschten mobilen Ansicht (1-3-2) anzuordnen, verwenden Sie den folgenden Code:

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

Bootstrap 4 (ältere Versionen)**

In früheren Versionen von Bootstrap 4 (vor 4.1) wurden Push- und Pull-Klassen verwendet, um die Spaltenreihenfolge zu steuern. Ab der Betaversion von Bootstrap 4.0 sind diese Klassen jedoch veraltet und wurden durch push-{viewport}-{units} und pull-{viewport}-{units} ersetzt.

Pre-4.0 Beta

Um das gewünschte Layout (1-3-2) mit der Betaversion vor 4.0 zu erreichen Syntax:

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

4.0 Beta und höher

Für Bootstrap 4.0 Beta und spätere Versionen sollte die folgende Syntax verwendet werden:

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

Andere Ansätze

Flexbox Richtung

In Bootstrap 4.1 und höher ist es auch möglich, die Flexbox-Richtungsdienstprogramme zu verwenden, um die Reihenfolge der Spalten zu ändern. Der folgende Code würde beispielsweise die Reihenfolge der Spalten auf mobilen Bildschirmen umkehren:

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

Zusammenklappbare Spalten

Eine weitere Möglichkeit, Spalten anzuordnen, besteht darin, zusammenklappbare Spalten zu verwenden. Dadurch können Sie Spalten basierend auf der Bildschirmgröße ein- oder ausblenden. Verwenden Sie die Klassen „collapse“ und „show“, um reduzierbare Spalten zu implementieren.

Weitere Details und Demonstrationen zum Sortieren von Spalten über Bootstrap4 finden Sie in den bereitgestellten Codebeispielen und der Dokumentation.

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