Bootstrap 5-Grid: Mittelgroßendevices

Rasterbeispiel für mittlere Geräte

XSmall Small Medium Large Extra Large XXL
Präfix der Klasse .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Bildschirmbreite <576px >=576px >=768px >=992px >=1200px >=1400px

Im vorherigen Kapitel haben wir einen Rasterbeispiel gezeigt, der Klassen für kleine Geräte enthält. Wir haben zwei div (Spalten) verwendet und ihnen eine 25% / 75% Aufteilung gegeben:

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

Aber auf mittleren Geräten könnte ein 50% / 50% Aufteilungsdesign besser sein.

Mittlere Geräte werden definiert als Bildschirmbreitevon 768 Pixel bis 991 Pixel.

Für mittlere Geräte verwenden wir .col-md-* Klasse:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</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.

Der folgende Beispiel führt zu einer Aufteilung von 25% / 75% auf kleinen Geräten und einer 50% / 50% Aufteilung auf mittleren (sowie großen, extra großen und riesigen) 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">
      <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat das große Panda als Symbol ...</p>
    </div>
    <div class="col-sm-9 col-md-6">
      <p>1980 wurde 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>

Versuchen Sie es selbst

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

nur Medium verwenden

In diesem Beispiel haben wir nur .col-md-6 Klasse (ohne .col-sm-*）。 Dies bedeutet, dass mittlere, große, extra große und XXL-Geräte 50% / 50% aufteilen, da diese Klasse sich ausdehnen wird. Allerdings werden für kleine und extra kleine Geräte vertikal gestapelt (100% Breite):

Beispiel

<div class="row">
  <div class="col-md-6">
    <p>Die Weltnaturschutzorganisation (WWF), gegründet am 29. April 1961, hat das große Panda als Symbol ...</p>
  </div>
  <div class="col-md-6">
    <p>1980 wurde WWF offiziell nach China eingeladen, um auf Ersuchen der chinesischen Regierung die Schutzarbeit für den Panda und seinen Lebensraum aufzunehmen ...</p>
  </div>
</div>

Versuchen Sie es selbst

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-md-* die Zahl entfernen und nur auf dem col-Element verwenden .col-md Klasse. Bootstrap erkennt, wie viele Spalten es gibt, und jede Spalte erhält die gleiche Breite.

wenn die Bildschirmgrößekleiner als 768px, die Spalten werden horizontal gestapelt:

<!-- Zwei Spalten: Ab mittleren und größeren Geräten sind 50% breit -->
<div class="row">
  <div class="col-md">1 von 2</div>
  <div class="col-md">2 von 2</div>
</div>
<!-- Vier Spalten: Ab mittleren und größeren Geräten sind 25% breit -->
<div class="row">
  <div class="col-md">1 von 4</div>
  <div class="col-md">2 von 4</div>
  <div class="col-md">3 von 4</div>
  <div class="col-md">4 von 4</div>
</div>

Versuchen Sie es selbst

Das nächste Kapitel zeigt, wie man verschiedene Spaltprozente für große Geräte hinzufügt.