Bootstrap 5 raster: Van stapelen naar horizontaal
- Vorige pagina BS5 rasterstelsel
- Volgende pagina BS5 raster XSmall
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>
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 .container
U 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>
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>
- Vorige pagina BS5 rasterstelsel
- Volgende pagina BS5 raster XSmall