Bootstrap 4 raster gestapeld-naar-horizontaal
Bootstrap 4-rastervoorbeeld: gestapeld-naar-horizontaal
We zullen een basisrastersysteem creëren dat gestapeld begint op extra kleine apparaten, voordat het horizontaal wordt op grotere apparaten.
Het volgende voorbeeld toont een eenvoudige "gestapelde-naar-horizontale" lay-out met twee kolommen, wat betekent dat het resulteert in een 50%/50% splitsing op alle schermen, behalve voor extra kleine schermen, die automatisch worden gestapeld (100%):
Voorbeeld: gestapeld-naar-horizontaal
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Tip: De getallen in de .col-sm-*klassen geven aan hoeveel kolommen de div moet beslaan (van de 12). Dus, .col-sm-1overspant 1 kolom, .col-sm-4overspant 4 kolommen,
.col-sm-6overspant 6 kolommen, enz.
Opmerking:
zorg ervoor dat de som 12 of minder is (het is niet vereist dat u alle 12 beschikbare kolommen gebruikt):
Tip: je kunt elke lay-out met vaste breedte veranderen in een lay-out met volledige breedte door de .containerklasse te wijzigen in .container-fluid:
Voorbeeld: Vloeistofreservoir
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Kolommen voor automatische lay-out
In Bootstrap 4 is er een gemakkelijke manier om kolommen met gelijke breedte voor alle apparaten te maken: verwijder gewoon het nummer van en gebruik de klasse alleen op een bepaald aantal
col-elementen . Bootstrap herkent hoeveel kolommen er zijn en elke kolom krijgt dezelfde breedte. De grootteklassen bepalen wanneer de kolommen responsief moeten zijn:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>