Bootstrap 5 Raster: Klein apparaat

Voorbeeld van kleine apparaat raster

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

Stel dat we een eenvoudige lay-out met twee kolommen hebben. Voor kleine apparaten willen we de kolommen splitsen in 25% / 75%.

Kleine apparaten worden gedefinieerd als schermbreedtevan 576 pixels tot 767 pixels。

Voor kleine apparaten gebruiken we .col-sm-* klasse.

We voegen de volgende klasse toe aan beide kolommen:

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

Het volgende voorbeeld zal een splitsing van 25% / 75% op kleine (en medium, groot, extra groot en zeer groot) apparaten produceren. Op zeer kleine apparaten zal het automatisch stapelen (100%):

Voorbeeld

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

Probeer het zelf

Let op:Zorg ervoor dat de som gelijk is aan of kleiner is dan 12 (gebruik niet alle 12 beschikbare kolommen):

Voor een splitsing van 33.3% / 66.6%, moet je gebruiken .col-sm-4 en .col-sm-8Voor een splitsing van 50% / 50%, moet je gebruiken .col-sm-6 en .col-sm-6)：

Voorbeeld

<!-- 33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>De World Wide Fund for Nature (WWF), opgericht op 29 april 1961, heeft als symbool een panda ...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>In 1980 kwam de WWF officieel naar China, uitgenodigd door de Chinese overheid om in China te werken aan de bescherming van de panda en zijn leefgebied ...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>De World Wide Fund for Nature (WWF), opgericht op 29 april 1961, heeft als symbool een panda ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>In 1980 kwam de WWF officieel naar China, uitgenodigd door de Chinese overheid om in China te werken aan de bescherming van de panda en zijn leefgebied ...</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 .col-sm-* het cijfer verwijderen en alleen col-elementenwordt gebruikt .col-sm Klasse. Bootstrap herkent het aantal kolommen en elke kolom krijgt dezelfde breedte.

Als de schermgrootteMinder dan 576pxKolommen zullen horizontaal gestapeld worden:

<!-- Twee kolommen: 50% breedte op alle schermen, behalve voor ultrakleine apparaten (100% breedte) -->
<div class="row">
  <div class="col-sm">1 van 2</div>
  <div class="col-sm">2 van 2</div>
</div>
<!-- Vier kolommen: 25% breedte op alle schermen, behalve voor ultrakleine apparaten (100% breedte) -->
<div class="row">
  <div class="col-sm">1 van 4</div>
  <div class="col-sm">2 van 4</div>
  <div class="col-sm">3 van 4</div>
  <div class="col-sm">4 van 4</div>
</div>

Probeer het zelf

Het volgende hoofdstuk zal laten zien hoe je verschillende splitsingspercentages kunt toevoegen voor middelgrote apparaten.