Bootstrap 5 raster: Van stapelen naar horizontaal

Rastervoorbeeld: Horizontaal opstaan

Laten we een basis rasterstelsel maken dat begint met het stapelen op ultrakleine apparaten en vervolgens horizontaal wordt.

Hieronder wordt een eenvoudige horizontale opstaande twekolomige indeling getoond, wat betekent dat het overal op het scherm een 50%/50% splitsing zal produceren, behalve op ultrakleine schermen, die automatisch worden gestapeld (100%):

Voorbeeld: Horizontaal opstaan

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>Kolom 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>Kolom 2 ...</p>
    </div>
  </div>
</div>

Probeer het zelf

Tip:.col-sm-* Het getal in de class geeft aan hoeveel kolommen de div moet overschrijden (totaal 12 kolommen). Dus,.col-sm-1 Over 1 kolom.col-sm-4 Over 4 kolommen.col-sm-6 Over 6 kolommen, enz.

Opmerking:Zorg ervoor dat de som gelijk is aan of kleiner is dan 12 (u hoeft niet alle 12 beschikbare kolommen te gebruiken):

Tip:Door .container-fluid class wijzigen naar .containerU kunt elke Volledige breedte De lay-out wordt omgezet in Vaste breedte De responsieve lay-out:

Voorbeeld: Responsieve container

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>Kolom 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>Kolom 2 ...</p>
    </div>
  </div>
</div>

Probeer het zelf

Automatische lay-outkolommen

In Bootstrap 5 is er een eenvoudige manier om gelijke brede kolommen voor alle apparaten te maken: je hoeft alleen maar van .col-size-* Verwijder de cijfers en gebruik alleen op de col-elementen .col-size Classen. Bootstrap herkent hoeveel kolommen er zijn en elke kolom krijgt dezelfde breedte. De size-classes (sm, md, etc.) bepalen wanneer een kolom moet responsief 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