Kolonner
Lær, hvordan du ændrer kolonner med en håndfuld muligheder for justering, bestilling og forskydning takket være vores flexbox-gittersystem. Se desuden, hvordan du bruger kolonneklasser til at administrere bredder af ikke-gitterelementer.
Hvordan de virker
-
Søjler bygger på gitterets flexbox-arkitektur. Flexbox betyder, at vi har muligheder for at ændre individuelle kolonner og ændre grupper af kolonner på rækkeniveau . Du vælger, hvordan kolonner vokser, krymper eller på anden måde ændres.
-
Når du bygger gitterlayouts, går alt indhold i kolonner. Hierarkiet af Bootstraps gitter går fra container til række til kolonne til dit indhold. I sjældne tilfælde kan du kombinere indhold og klumme, men vær opmærksom på, at der kan være utilsigtede konsekvenser.
-
Bootstrap inkluderer foruddefinerede klasser til at skabe hurtige, responsive layouts. Med seks brudpunkter og et dusin kolonner på hvert gitterniveau har vi snesevis af klasser allerede bygget til dig, så du kan oprette dine ønskede layouts. Dette kan deaktiveres via Sass, hvis du ønsker det.
Justering
Brug flexbox-justeringsværktøjer til at justere kolonner lodret og vandret.
Lodret justering
<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>
Horisontal justering
<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>
Søjleindpakning
Hvis mere end 12 kolonner er placeret i en enkelt række, vil hver gruppe af ekstra kolonner, som én enhed, ombrydes på en ny linje.
Da 9 + 4 = 13 > 12, bliver denne 4-kolonne brede div indpakket på en ny linje som en sammenhængende enhed.
Efterfølgende kolonner fortsætter langs den nye linje.
<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>
Kolonnebrud
At bryde kolonner til en ny linje i flexbox kræver et lille hack: tilføj et element med, width: 100%
hvor du vil pakke dine kolonner til en ny linje. Normalt opnås dette med flere .row
s, men ikke alle implementeringsmetoder kan tage højde for dette.
<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>
Du kan også anvende denne pause ved specifikke pausepunkter med vores responsive display-værktøjer .
<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>
Genbestilling
Bestil klasser
Brug .order-
klasser til at kontrollere den visuelle rækkefølge af dit indhold. Disse klasser er responsive, så du kan indstille order
efter breakpoint (f.eks. .order-1.order-md-2
). Inkluderer støtte til 1
gennem 5
alle seks gitterniveauer.
<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>
Der er også responsive .order-first
og .order-last
klasser, der ændrer order
et elements ved at anvende order: -1
og order: 6
hhv. Disse klasser kan også blandes med de nummererede .order-*
klasser efter behov.
<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>
Forskydning af kolonner
Du kan forskyde gitterkolonner på to måder: vores responsive .offset-
gitterklasser og vores marginværktøjer . Gitterklasser er dimensioneret til at matche kolonner, mens margener er mere nyttige til hurtige layouts, hvor bredden af forskydningen er variabel.
Offset klasser
Flyt kolonner til højre ved hjælp af .offset-md-*
klasser. Disse klasser øger venstre margen af en kolonne med *
kolonner. .offset-md-4
Flytter for eksempel .col-md-4
over fire kolonner.
<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>
Ud over kolonnerydning ved responsive breakpoints, skal du muligvis nulstille forskydninger. Se dette i aktion i gittereksemplet .
<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>
Marginværktøjer
Med skiftet til flexbox i v4 kan du bruge margin-værktøjer som .me-auto
at tvinge søskendekolonner væk fra hinanden.
<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>
Standalone kolonneklasser
Klasserne .col-*
kan også bruges uden for a .row
til at give et element en bestemt bredde. Når kolonneklasser bruges som ikke-direkte underordnede af en række, udelades udfyldningerne.
<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>
Klasserne kan bruges sammen med hjælpeprogrammer til at skabe responsive flydende billeder. Sørg for at pakke indholdet ind i en .clearfix
indpakning for at fjerne flyderen, hvis teksten er kortere.
Et afsnit med pladsholdertekst. Vi bruger det her til at vise brugen af clearfix-klassen. Vi tilføjer en hel del meningsløse sætninger her for at demonstrere, hvordan søjlerne her interagerer med det flydende billede.
Som du kan se, ombrydes afsnittene elegant omkring det flydende billede. Forestil dig nu, hvordan dette ville se ud med noget faktisk indhold herinde, snarere end bare denne kedelige pladsholdertekst, der bliver ved og ved, men faktisk ikke formidler nogen håndgribelig information. Den fylder simpelthen og skal egentlig ikke læses.
Og alligevel, her er du stadig ved at læse denne pladsholdertekst og håber på nogle flere indsigter eller et skjult påskeæg med indhold. En joke, måske. Desværre er der ikke noget af det her.
<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>