Bootstrap 5-Grid: Überkleinere Geräte

Beispiel für sehr kleine Gerätengitter

XSmall Small Medium Large Extra Large XXL
Klassenpräfix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Bildschirmbreite <576px >=576px >=768px >=992px >=1200px >=1400px

Angenommen, wir haben eine einfache Layout mit zwei Spalten. Wir möchten, dass die SpaltenAlleGeräteaufteilung 25% / 75%.

Wir fügen die folgenden Klassen in zwei Spalten ein:

<div class="col-3">....</div>
<div class="col-9">....</div>

Das folgende Beispiel führt zu einer 25% / 75% -Aufteilung aller Geräte (sehr klein, klein, mittler, groß, sehr groß und extra groß).

Beispiel

<div class="container-fluid">
  <div class="row">
    <div class="col-3 bg-primary">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein Grosses Panda ...</p>
    </div>
    <div class="col-9 bg-dark">
      <p>1980 wurde die WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung den Schutz des Grossen Pandas und seiner Lebensräume zu unterstützen ...</p>
    </div>
  </div>
</div>

Probieren Sie es selbst aus

Hinweis:Bitte stellen Sie sicher, dass die Summe 12 oder weniger beträgt (es ist nicht erforderlich, alle 12 verfügbaren Spalten zu verwenden):

Für 33.3% / 66.6% der Aufteilung sollten Sie .col-4 und .col-8Für 50% / 50% der Aufteilung sollten Sie .col-6 und .col-6）：

Beispiel

<!-- 33.3%/66.6% Split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 bg-primary">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein Grosses Panda ...</p>
    </div>
    <div class="col-8 bg-dark">
      <p>1980 wurde die WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung den Schutz des Grossen Pandas und seiner Lebensräume zu unterstützen ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% Split -->
<div class="container-fluid">
  <div class="row">
    <div class="col-6 bg-primary">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein Grosses Panda ...</p>
    </div>
    <div class="col-6 bg-dark">
      <p>1980 wurde die WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung den Schutz des Grossen Pandas und seiner Lebensräume zu unterstützen ...</p>
    </div>
  </div>
</div>

Probieren Sie es selbst aus

Automatische Layout-Spalten

In Bootstrap 5 gibt es eine einfache Methode, um für alle Geräte automatische Layout-Spalten zu erstellengleich breite SpaltenNur von .col-* Zahlen entfernen und nur auf dem col-Element verwenden .col Klassen. Bootstrap erkennt, wie viele Spalten vorhanden sind, und jede Spalte erhält die gleiche Breite:

<!-- Zwei Spalten: 50% Breite -->
<div class="row">
  <div class="col">1 von 2</div>
  <div class="col">2 von 2</div>
</div>
<!-- Vier Spalten: 25% Breite -->
<div class="row">
  <div class="col">1 von 4</div>
  <div class="col">2 von 4</div>
  <div class="col">3 von 4</div>
  <div class="col">4 von 4</div>
</div>

Probieren Sie es selbst aus

Das nächste Kapitel zeigt, wie man verschiedene Spaltprozente für kleine Geräte hinzufügt.