Kolommen
Leer hoe u kolommen kunt wijzigen met een handvol opties voor uitlijning, volgorde en compensatie dankzij ons flexbox-rastersysteem. Bekijk bovendien hoe u kolomklassen kunt gebruiken om de breedte van niet-rasterelementen te beheren.
Hoe ze werken
-
Kolommen bouwen voort op de flexbox-architectuur van het raster. Flexbox betekent dat we opties hebben voor het wijzigen van individuele kolommen en het wijzigen van groepen kolommen op rijniveau . U kiest hoe kolommen groeien, krimpen of anderszins veranderen.
-
Bij het bouwen van rasterlay-outs gaat alle inhoud in kolommen. De hiërarchie van het Bootstrap-raster gaat van container naar rij naar kolom naar uw inhoud. In zeldzame gevallen kunt u inhoud en kolom combineren, maar houd er rekening mee dat er onbedoelde gevolgen kunnen zijn.
-
Bootstrap bevat vooraf gedefinieerde klassen voor het maken van snelle, responsieve lay-outs. Met zes breekpunten en een dozijn kolommen op elke rasterlaag, hebben we al tientallen klassen voor u gebouwd om uw gewenste lay-outs te maken. Dit kan desgewenst via Sass worden uitgeschakeld.
Uitlijning
Gebruik flexbox-uitlijnhulpprogramma's om kolommen verticaal en horizontaal uit te lijnen.
Verticale uitlijning
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Horizontale uitlijning
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Kolomterugloop
Als er meer dan 12 kolommen in een enkele rij worden geplaatst, zal elke groep extra kolommen, als één geheel, op een nieuwe regel worden geplaatst.
Aangezien 9 + 4 = 13 > 12, wordt deze 4-koloms brede div als één aaneengesloten eenheid op een nieuwe regel gewikkeld.
Volgende kolommen gaan verder langs de nieuwe regel.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Kolomeinden
Het afbreken van kolommen naar een nieuwe regel in flexbox vereist een kleine hack: voeg een element toe met width: 100%
waar u uw kolommen naar een nieuwe regel wilt wikkelen. Normaal gesproken wordt dit bereikt met meerdere .row
s, maar niet elke implementatiemethode kan hier rekening mee houden.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
U kunt deze onderbreking ook toepassen op specifieke onderbrekingspunten met onze hulpprogramma's voor responsieve weergave .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Opnieuw ordenen
Bestel lessen
Gebruik .order-
klassen om de visuele volgorde van uw inhoud te bepalen. Deze klassen zijn responsief, dus u kunt het order
by-breakpoint instellen (bijv. .order-1.order-md-2
). Bevat ondersteuning voor 1
alle 5
zes rasterlagen.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-5">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Er zijn ook responsieve klassen .order-first
en .order-last
klassen die het order
element van een element wijzigen door respectievelijk order: -1
en toe te passen order: 6
. Deze klassen kunnen indien nodig ook worden vermengd met de genummerde .order-*
klassen.
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Kolommen compenseren
U kunt rasterkolommen op twee manieren verschuiven: onze responsieve .offset-
rasterklassen en onze margehulpprogramma's . De grootte van rasterklassen is afgestemd op kolommen, terwijl marges nuttiger zijn voor snelle lay-outs waarbij de breedte van de offset variabel is.
Offset klassen
Verplaats kolommen naar rechts met behulp van .offset-md-*
klassen. Deze klassen vergroten de linkermarge van een kolom met *
kolommen. .offset-md-4
Beweegt bijvoorbeeld .col-md-4
over vier kolommen.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Naast het wissen van kolommen bij responsieve onderbrekingspunten, moet u mogelijk de offsets opnieuw instellen. Zie dit in actie in het rastervoorbeeld .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Marge-hulpprogramma's
Met de overstap naar flexbox in v4, kunt u margehulpprogramma's gebruiken .me-auto
om kolommen van broers en zussen van elkaar af te dwingen.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
<div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
</div>
<div class="row">
<div class="col-auto me-auto">.col-auto .me-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Op zichzelf staande kolomklassen
De .col-*
klassen kunnen ook buiten a worden gebruikt .row
om een element een bepaalde breedte te geven. Wanneer kolomklassen worden gebruikt als niet-directe onderliggende elementen van een rij, worden de opvullingen weggelaten.
<div class="col-3 bg-light p-3 border">
.col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: width of 75% above sm breakpoint
</div>
De klassen kunnen samen met hulpprogramma's worden gebruikt om responsieve zwevende afbeeldingen te maken. Zorg ervoor dat u de inhoud in een .clearfix
wrapper wikkelt om de float te wissen als de tekst korter is.
Een alinea met tijdelijke tekst. We gebruiken het hier om het gebruik van de clearfix-klasse te laten zien. We voegen hier nogal wat zinloze zinnen toe om te laten zien hoe de kolommen hier interageren met de zwevende afbeelding.
Zoals je kunt zien, lopen de alinea's sierlijk rond de zwevende afbeelding. Stel je nu eens voor hoe dit eruit zou zien met wat echte inhoud hier, in plaats van alleen deze saaie tijdelijke tekst die maar door en door gaat, maar eigenlijk geen tastbare informatie overbrengt. Het neemt gewoon ruimte in beslag en zou eigenlijk niet gelezen moeten worden.
En toch, hier ben je, nog steeds volhardend in het lezen van deze tijdelijke tekst, in de hoop op wat meer inzichten, of een verborgen paasei van inhoud. Een grapje misschien. Helaas is dat hier niet.
<div class="clearfix">
<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
<p>
A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
</p>
<p>
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
</p>
<p>
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
</p>
</div>