Bootstrap 5-Grid: Kleines Gerät
- Vorherige Seite BS5-Gitter XSmall
- Nächste Seite BS5-Gitter Medium
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>
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-8
Fü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>
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>
Das nächste Kapitel zeigt, wie man verschiedene Aufteilungsprozente für mittlere Geräte hinzufügt.
- Vorherige Seite BS5-Gitter XSmall
- Nächste Seite BS5-Gitter Medium