Bootstrap 5-Grid: XXL

XXL-Geräte-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

XXL-Geräte werden definiert als 1400 Pixel und mehrder Bildschirmbreite.

Die folgenden Beispiele erzeugen eine Aufteilung von 50/50% auf mittleren, großen und extra großen Geräten und eine Aufteilung von 25/75% auf XXL-Geräten. Auf kleinen und extra kleinen Geräten wird es automatisch gestapelt (100%):

Beispiel

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein Grossmutterpanda ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>1980 wurde die WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung die Schutzarbeit für den Großen Panda und seinen Lebensraum durchzuführen ...</p>
    </div>
  </div>
</div>

Probieren Sie es selbst aus

Hinweis:Stellen Sie sicher, dass die Summe immer 12 beträgt.

nur XXL

Im folgenden Beispiel haben wir nur .col-xxl-6 Klassen (ohne .col-md-* und / oder .col-sm-*）。 Dies bedeutet, dass die xxlarge-Geräte 50/50% aufteilen. Aber für extra-große, große, mittlere, kleine und extra-kleine Geräte werden sie vertikal gestapelt (100% Breite):

Beispiel

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat als Symbol ein Grossmutterpanda ...</p>
    </div>
    <div class="col-xxl-6">
      <p>1980 wurde die WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung die Schutzarbeit für den Großen Panda und seinen Lebensraum durchzuführen ...</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 breit gleiche Spalten zu erstellen: Es reicht aus, von .col-xxl-* Zahlen entfernen und nur auf dem col-Element verwenden .col-xxl Klassen. Bootstrap erkennt, wie viele Spalten es gibt, und jede Spalte erhält die gleiche Breite.

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

<!-- Zweispaltig: Bei großen und größeren Geräten sind sie 50% breit -->
<div class="row">
  <div class="col-xxl">1 von 2</div>
  <div class="col-xxl">2 von 2</div>
</div>
<!-- Vier Spalten: Bei großen und größeren Geräten sind sie 25% breit -->
<div class="row">
  <div class="col-xxl">1 von 4</div>
  <div class="col-xxl">2 von 4</div>
  <div class="col-xxl">3 von 4</div>
  <div class="col-xxl">4 von 4</div>
</div>

Probieren Sie es selbst aus