Bootstrap 5 Raster: Overgroot apparaat

Extra Large Device Grid Example

XSmall Small Medium Large Extra Large XXL
Class voorvoegsel .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Schermbreedte <576px >=576px >=768px >=992px >=1200px >=1400px

In het vorige hoofdstuk hebben we een rastervoorbeeld getoond, waarin klassen voor kleine, middelgrote en grote apparaten worden gebruikt. We hebben twee div's (kolommen) gebruikt en hebben op kleine apparaten een splitsing van 25/75% toegepast, op middelgrote apparaten een splitsing van 50/50% en op grote apparaten een splitsing van 33/66%:

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

Maar op xlarge apparaten kan een ontwerp met een splitsing van 20/80% beter zijn.

Extra grote apparaten worden gedefinieerd als schermbreedte van 1200 pixels of meer.

Voor xlarge apparaten zullen we gebruiken: .col-xl-* Soort:

<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>

Het volgende voorbeeld leidt tot een splitsing van 25/75% op kleine apparaten, 50/50% op middelgrote apparaten, 33/66% op grote apparaten en 20/80% op xlarge en xxlarge apparaten. Op zeer kleine apparaten wordt het automatisch gestapeld (100%):

Voorbeeld

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>De World Wide Fund for Nature (WWF), opgericht op 29 april 1961, heeft een panda als symbool ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>In 1980 kwam de WWF officieel naar China, uitgenodigd door de Chinese overheid om de bescherming van de giant panda en zijn leefomgeving te starten ...</p>
    </div>
  </div>
</div>

Probeer het zelf

Opmerking:Zorg ervoor dat de som altijd 12 is.

Gebruik alleen XLarge

In het volgende voorbeeld specifiëren we alleen .col-xl-6 klasse (zonder .col-lg-*,.col-md-* en/or .col-sm-*）。 Dit betekent dat xlarge en xxlarge apparaten 50/50% zullen splitsen. Maar voor grote, middelgrote, kleine en ultrakleine apparaten zal het verticaal worden gestapeld (100% breedte):

Voorbeeld

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>De World Wide Fund for Nature (WWF), opgericht op 29 april 1961, heeft een panda als symbool ...</p>
    </div>
    <div class="col-xl-6">
      <p>In 1980 kwam de WWF officieel naar China, uitgenodigd door de Chinese overheid om de bescherming van de giant panda en zijn leefomgeving te starten ...</p>
    </div>
  </div>
</div>

Probeer het zelf

Automatische lay-out kolommen

In Bootstrap 5 is er een eenvoudige manier om voor alle apparaten gelijke breedte kolommen te maken: je hoeft alleen maar van .col-xl-* De cijfers verwijderen in de .col-xl, en gebruik alleen de col-elementen .col-xl Bootstrap herkent hoeveel kolommen er zijn en elke kolom krijgt dezelfde breedte.

Als het schermformaatMinder dan 1200pxDe kolommen zullen horizontaal worden gestapeld:

<!-- Twee kolommen: op apparaten groter dan supergroot is de breedte 50% -->
<div class="row">
  <div class="col-xl">1 van 2</div>
  <div class="col-xl">2 van 2</div>
</div>
<!-- Vier kolommen: op apparaten groter dan supergroot is de breedte 25% -->
<div class="row">
  <div class="col-xl">1 van 4</div>
  <div class="col-xl">2 van 4</div>
  <div class="col-xl">3 van 4</div>
  <div class="col-xl">4 van 4</div>
</div>

Probeer het zelf