Bootstrap 5 grid: XXL

XXL apparaat grid voorbeeld

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

XXL-apparaten worden gedefinieerd als apparaten met 1400 pixels en hogervan het schermbreedte.

De volgende voorbeeld zal een splitsing van 50/50% op middelgrote, grote en ultra-grote apparaten veroorzaken, en een splitsing van 25/75% op XXL-apparaten. Op kleine en ultra-kleine apparaten zal het automatisch samenvallen (100%):

Voorbeeld

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

Probeer het zelf

Opmerking:Zorg ervoor dat de som altijd 12 is.

alleen XXL

in het volgende voorbeeld hebben we alleen .col-xxl-6 klasse (zonder .col-md-* en / of .col-sm-*）。 Dit betekent dat xxlarge-apparaten 50/50% zullen splitsen. Maar voor ultra-grote, grote, middelgrote, kleine en ultra-kleine apparaten, zullen ze verticaal gestapeld worden (100% breedte):

Voorbeeld

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

Probeer het zelf

Automatische lay-outkolommen

in Bootstrap 5 is er een eenvoudige manier om gelijke breedtekolommen voor alle apparaten te maken: je hoeft alleen maar van .col-xxl-* het cijfer verwijderen en alleen op het col-element gebruiken .col-xxl klasse. Bootstrap herkent hoeveel kolommen er zijn en elke kolom krijgt dezelfde breedte.

als het schermformaatkleiner dan 1400px，kolommen zullen horizontaal gestapeld worden:

<!-- Twee kolommen: op apparaten van extra-grote afmetingen is de breedte 50% -->
<div class="row">
  <div class="col-xxl">1 van 2</div>
  <div class="col-xxl">2 van 2</div>
</div>
<!-- Vier kolommen: op apparaten van extra-grote afmetingen is de breedte 25% -->
<div class="row">
  <div class="col-xxl">1 van 4</div>
  <div class="col-xxl">2 van 4</div>
  <div class="col-xxl">3 van 4</div>
  <div class="col-xxl">4 van 4</div>
</div>

Probeer het zelf