Bootstrap 5-Grid: Kleines Gerät

Beispiel für Raster für kleine Geräte

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. Für kleine Geräte möchten wir die Spalten in 25% / 75% aufteilen.

Kleine Geräte werden definiert als BildschirmbreiteVon 576 Pixel bis 767 Pixel

Für kleine Geräte verwenden wir .col-sm-* Klasse.

Wir fügen die folgenden Klassen beiden Spalten hinzu:

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

Das folgende Beispiel erzeugt eine Aufteilung von 25% / 75% auf kleinen (sowie mittleren, großen, extra großen und extra großen) Geräten. Auf sehr kleinen Geräten wird es automatisch gestapelt (100%):

Beispiel

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

Probieren Sie es selbst aus

Hinweis:Stellen Sie sicher, dass die Summe 12 oder weniger beträgt (nicht alle 12 verfügbaren Spalten verwenden):

Für eine Aufteilung von 33.3% / 66.6% sollten Sie verwenden .col-sm-4 und .col-sm-8Für eine Aufteilung von 50% / 50% sollten Sie verwenden .col-sm-6 und .col-sm-6):

Beispiel

<!-- 33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein großes Panda ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1980 wurde der WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung den Schutz des Großen Pandas und seiner Habitate zu unterstützen ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% Split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein großes Panda ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1980 wurde der WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung den Schutz des Großen Pandas und seiner Habitate 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 gleich breite Spalten zu erstellen: Es reicht aus, von .col-sm-* entfernen Sie die Ziffern und verwenden Sie nur col-Elementeverwendet .col-sm Bootstrap erkennt, wie viele Spalten es gibt, und jede Spalte erhält die gleiche Breite.

Wenn die BildschirmgrößeUnter 576pxDie Spalten werden horizontal gestapelt:

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

Probieren Sie es selbst aus

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