Bootstrap 5-Grid: Übergroße Geräte

Große Gerät-Grid-Beispiel

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

Im vorherigen Kapitel haben wir eine Gitterbeispiel gezeigt, das Klassen für kleine, mittlere und große Geräte enthält. Wir haben zwei div (Spalten) verwendet und eine Aufteilung von 25%/75% auf kleinen Geräten, 50%/50% auf mittleren Geräten und 33%/66% auf großen Geräten vorgenommen:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Auf xlarge-Geräten könnte eine Aufteilung von 20% / 80% jedoch besser sein.

Große Geräte werden definiert als Bildschirmbreite von 1200 Pixel und mehr.

Für xlarge-Geräte verwenden wir .col-xl-* Klasse:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

Das folgende Beispiel führt zu einer Aufteilung von 25%/75% auf kleinen Geräten, 50%/50% auf mittleren Geräten, 33%/66% auf großen Geräten sowie 20%/80% auf xlarge und xxlarge-Geräten. Auf ultrakleinen Geräten wird es automatisch gestapelt (100%):

Beispiel

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein Grosses Panda ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <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:Stellen Sie sicher, dass die Summe immer 12 beträgt.

Nur XLarge verwenden

Im folgenden Beispiel geben wir nur .col-xl-6 Klassen (ohne .col-lg-*,.col-md-* und/oder .col-sm-*）。 Dies bedeutet, dass xlarge und xxlarge-Geräte 50/50% aufteilen. Aber für large, medium, small und extra small-Geräte wird vertikal gestapelt (100% Breite):

Beispiel

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein Grosses Panda ...</p>
    </div>
    <div class="col-xl-6">
      <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 gleich breite Spalten zu erstellen: Es reicht aus, von .col-xl-* Die Zahlen entfernen und nur auf dem col-Element verwenden .col-xl Klassen. Bootstrap erkennt, wie viele Spalten es gibt, und jede Spalte erhält die gleiche Breite.

Wenn die BildschirmgrößeKleiner als 1200px, die Spalten werden horizontal gestapelt:

<!-- Zwei Spalten: Ab großen Geräten sind 50% breit -->
<div class="row">
  <div class="col-xl">1 von 2</div>
  <div class="col-xl">2 von 2</div>
</div>
<!-- Vier Spalten: Ab großen Geräten sind 25% breit -->
<div class="row">
  <div class="col-xl">1 von 4</div>
  <div class="col-xl">2 von 4</div>
  <div class="col-xl">3 von 4</div>
  <div class="col-xl">4 von 4</div>
</div>

Probieren Sie es selbst aus