Bootstrap 5 Raster: Von gestapelt zu horizontal

Rasterbeispiel: Horizontale Anordnung

Lassen Sie uns ein grundlegendes Rastersystem erstellen, das initially auf Ultrakleinen Geräten gestapelt ist und dann auf größeren Geräten horizontal wird.

Der folgende Beispiel zeigt eine einfache horizontale Anordnung von zwei Spalten, was bedeutet, dass sie auf allen Bildschirmen eine 50%/50%ige Aufteilung erzeugt, mit Ausnahme der Ultrakleinen Bildschirme, die automatisch gestapelt (100%) werden:

Beispiel: Horizontale Anordnung

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Spalte 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Spalte 2 ...</p>
    </div>
  </div>
</div>

Versuchen Sie es selbst

Hinweis:.col-sm-* Die Zahl in der Klasse zeigt an, wie viele Spalten der div überspannen soll (insgesamt 12 Spalten). Also,.col-sm-1 überspannt 1 Spalte.col-sm-4 überspannt 4 Spalten.col-sm-6 überspannt 6 Spalten, usw.

Hinweis:Stellen Sie sicher, dass die Summe 12 oder weniger beträgt (es müssen nicht alle 12 verfügbaren Spalten verwendet werden):

Hinweis:durch .container-fluid Klasse in .containerkönnen Sie jede volle Breite Konvertierung in feste Breite Reaktive Anordnung:

Beispiel: Reaktive Container

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Spalte 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Spalte 2 ...</p>
    </div>
  </div>
</div>

Versuchen Sie es selbst

Automatisch gestaltete Spalten

In Bootstrap 5 gibt es eine einfache Methode, um für alle Geräte gleich breite Spalten zu erstellen: Nur von .col-size-* Zahlen entfernen und nur auf dem col-Element verwenden .col-size Klassen. Bootstrap erkennt, wie viele Spalten es gibt, und jede Spalte erhält die gleiche Breite. Die Größe der Klasse (sm, md usw.) bestimmt, zu welchem Zeitpunkt eine Spalte reagieren sollte:

<!-- Zwei Spalten: 50% Breite auf allen Bildschirmen, außer auf ultrakleinen Geräten (100% Breite) -->
<div class="row">
  <div class="col-sm">1 von 2</div>
  <div class="col-sm">2 von 2</div>
</div>
<!-- Vier Spalten: 25% Breite auf allen Bildschirmen, außer auf ultrakleinen Geräten (100% Breite) -->
<div class="row">
  <div class="col-sm">1 von 4</div>
  <div class="col-sm">2 von 4</div>
  <div class="col-sm">3 von 4</div>
  <div class="col-sm">4 von 4</div>
</div>

Versuchen Sie es selbst