Bootstrap 5-Grid: Große Geräte

Kursempfehlung:

Rasterbeispiel für große Geräte XSmall Small Medium Large Extra Large
XXL Klassenpräfix .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- Bildschirmbreite <576px >=768px >=992px >=1200px >=1400px

Im vorherigen Kapitel haben wir einen Rasterbeispiel gezeigt, der Klassen für kleine und mittlere Geräte enthält. Wir haben zwei div (Spalten) verwendet und eine 25%/75%-Aufteilung auf kleinen Geräten und eine 50%/50%-Aufteilung auf mittleren Geräten vorgenommen:

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

aber eine Aufteilung von 33% / 66% könnte auf großen Geräten besser sein.

Große Geräte werden definiert als Bildschirmbreitevon 992 Pixel bis 1199 Pixel。

Für große Geräte verwenden wir .col-lg-* Klasse:

<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 kleinen Geräten verwenden Sie bitte die Klasse -sm- der Klasse. Auf mittleren Geräten verwenden Sie bitte die Klasse -md- der Klasse. Auf großen Geräten verwenden Sie bitte die Klasse -lg- der Klasse.

Der folgende Beispiel führt zu einer Aufteilung von 25%/75% auf kleinen Geräten, 50%/50% auf mittleren Geräten und 33%/66% auf großen, 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">
      <p>Die World Wide Fund for Nature (WWF), gegründet am 29. April 1961, hat das Bild eines Pandas als Symbol.</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>1980 wurde die WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung die Schutzarbeit für den Panda und seinen Lebensraum aufzunehmen ...</p>
    </div>
  </div>
</div>

Probieren Sie es selbst aus

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

Nur Large verwenden

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

Beispiel

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>Die World Wide Fund for Nature (WWF), gegründet am 29. April 1961, hat das Bild eines Pandas als Symbol.</p>
    </div>
    <div class="col-lg-6">
      <p>1980 wurde die WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung die Schutzarbeit für den Panda und seinen Lebensraum aufzunehmen ...</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: einfach von .col-lg-* Zahlen entfernen und nur auf dem col-Element verwenden .col-lg Klasse. Bootstrap erkennt, wie viele Spalten es gibt, und jede Spalte erhält die gleiche Breite.

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

<!-- Zwei Spalten: Ab Large sind sie 50% breit -->
<div class="row">
  <div class="col-lg">1 von 2</div>
  <div class="col-lg">2 von 2</div>
</div>
<!-- Vier Spalten: Ab Large sind sie 25% breit -->
<div class="row">
  <div class="col-lg">1 von 4</div>
  <div class="col-lg">2 von 4</div>
  <div class="col-lg">3 von 4</div>
  <div class="col-lg">4 von 4</div>
</div>

Probieren Sie es selbst aus