Wie ordne ich Spalten in Bootstrap 4 und 5 effektiv an?

Spalten mit Bootstrap 4 anordnen

In Bootstrap 4 kann die Spaltenreihenfolge mithilfe einer Kombination aus Klassen und Flexbox erreicht werden. Um das gewünschte 1-3-2-Layout auf mobilen Bildschirmen zu erhalten, erkunden wir die folgenden Techniken:

2021 – Bootstrap 5

Bootstrap 5 führte neue Klassen für ein Responsive Bestellung: Bestellung zuerst, Bestellung zuletzt und Bestellung 0 bis Bestellung 5. Dies vereinfacht die Spaltenreihenfolge und ermöglicht es Ihnen, die gewünschte Reihenfolge für jede Ansichtsfenstergröße festzulegen.

2018 – Bootstrap 4

Beta vor 4.0:

Vor der Betaversion von Bootstrap 4.0 hatten Push- und Pull-Klassen das Format push-{viewport}-{units} und pull-{viewport}-{units} ohne das xs-Infix. Um ein 1-3-2-Layout auf Mobilgeräten zu erreichen, würden wir Klassen wie diese verwenden:

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

Bootstrap 4.1 und höher

Bootstrap 4.1 führte Flexbox ein und stellte bereit eine intuitivere Möglichkeit, Spalten anzuordnen. Die Responsive-Bestellklassen reichen von order-1 bis order-12. Durch Festlegen dieser Klassen können wir die Reihenfolge der Spalten relativ zu ihrer übergeordneten .row angeben:

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

Reihenfolge mithilfe der Flexbox-Richtung ändern

Zusätzlich zur Reihenfolge der Klassen , Bootstrap 4.1 ermöglicht auch die Umkehrung der Spaltenreihenfolge mithilfe von Flexbox-Richtungsdienstprogrammen:

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

Das obige ist der detaillierte Inhalt vonWie ordne ich Spalten in Bootstrap 4 und 5 effektiv an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!