Bootstrap 4 Grid - Ekstra groot

XLarge Grid Voorbeeld

In die vorige hoofstuk het ons 'n roostervoorbeeld met klasse vir klein en medium toestelle aangebied. Ons het twee divs (kolomme) gebruik en ons het hulle 'n verdeling van 25%/75% op klein toestelle gegee, en 'n 50%/50%-verdeling op medium toestelle en 'n 33%/66%-verdeling op groot toestelle:

Maar op groot toestelle kan die ontwerp beter wees as 'n verdeling van 20%/80%.

Vir xgroot toestelle sal ons die .col-xl-*klasse gebruik:

Die volgende voorbeeld sal lei tot 'n 25%/75% verdeling op klein toestelle, 'n 50%/50% verdeling op medium toestelle, en 'n 33%/66% verdeling op groot en 'n 20%/80% verdeling op xlarge toestelle. Op ekstra klein toestelle sal dit outomaties stapel (100%):

Gebruik slegs XLarge

In die voorbeeld hieronder spesifiseer ons slegs die .col-xl-6klas (sonder .col-lg-*, .col-md-*en/of .col-sm-*). Dit beteken dat xlarge toestelle 50%/50% sal verdeel. Vir groot, medium, klein EN ekstra klein toestelle sal dit egter vertikaal stapel (100% breedte):

Outo-uitlegkolomme

In Bootstrap 4 is daar 'n maklike manier om gelyke breedte kolomme vir alle toestelle te skep: verwyder net die nommer uit .col-xl-*en gebruik die .col-xlklas slegs op 'n gespesifiseerde aantal kol-elemente . Bootstrap sal herken hoeveel kolomme daar is, en elke kolom sal dieselfde breedte kry.

As die skermgrootte minder as 1200px is, sal die kolomme horisontaal gestapel word: