Bootstrap 4-rooster gestapel-tot-horisontaal
Bootstrap 4 Grid Voorbeeld: Gestapel-tot-horisontaal
Ons sal 'n basiese roosterstelsel skep wat begin gestapel op ekstra klein toestelle, voordat dit horisontaal word op groter toestelle.
Die volgende voorbeeld toon 'n eenvoudige "gestapel-tot-horisontale" twee-kolom-uitleg, wat beteken dat dit 'n verdeling van 50%/50% op alle skerms tot gevolg sal hê, behalwe vir ekstra klein skerms, wat dit outomaties sal stapel (100%):
Voorbeeld: Gestapel-tot-horisontaal
<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>
Wenk: Die getalle in die .col-sm-*klasse dui aan hoeveel kolomme die div moet strek (uit 12). Dus, .col-sm-1strek oor 1 kolom, .col-sm-4strek oor 4 kolomme,
.col-sm-6strek oor 6 kolomme, ens.
Let wel:
Maak seker dat die som 12 of minder optel (dit word nie vereis dat jy al 12 beskikbare kolomme gebruik nie):
Wenk: Jy kan enige vaste-wydte-uitleg in 'n volwydte- uitleg verander deur die .containerklas te verander na .container-fluid:
Voorbeeld: Vloeistofhouer
<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>
Outo-uitlegkolomme
In Bootstrap 4 is daar 'n maklike manier om gelyke breedte kolomme vir alle toestelle te skep: verwyder net die nommer uit en gebruik die klas slegs op 'n gespesifiseerde aantal
kol-elemente . Bootstrap sal herken hoeveel kolomme daar is, en elke kolom sal dieselfde breedte kry. Die grootteklasse bepaal wanneer die kolomme reageer:.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>