Kolumner
Lär dig hur du modifierar kolumner med en handfull alternativ för justering, ordning och förskjutning tack vare vårt flexbox rutsystem. Dessutom kan du se hur du använder kolumnklasser för att hantera bredder på element som inte är rutnät.
Hur de fungerar
-
Kolumner bygger på nätets flexbox-arkitektur. Flexbox innebär att vi har alternativ för att ändra enskilda kolumner och modifiera grupper av kolumner på radnivå . Du väljer hur kolumner växer, krymper eller på annat sätt ändras.
-
När du bygger rutnätslayouter hamnar allt innehåll i kolumner. Hierarkin för Bootstraps rutnät går från behållare till rad till kolumn till ditt innehåll. I sällsynta fall kan du kombinera innehåll och kolumn, men var medveten om att det kan få oavsiktliga konsekvenser.
-
Bootstrap innehåller fördefinierade klasser för att skapa snabba, responsiva layouter. Med sex brytpunkter och ett dussin kolumner på varje rutnätsnivå har vi dussintals klasser redan byggda för att du ska kunna skapa dina önskade layouter. Detta kan inaktiveras via Sass om du vill.
Inriktning
Använd flexbox-justeringsverktyg för att justera kolumner vertikalt och horisontellt.
Vertikal inriktning
<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>
Horisontell linjering
<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>
Kolumnlindning
Om fler än 12 kolumner placeras inom en enda rad, kommer varje grupp av extra kolumner, som en enhet, att slås in på en ny rad.
Eftersom 9 + 4 = 13 > 12, lindas denna 4-kolumn breda div på en ny linje som en sammanhängande enhet.
Efterföljande kolumner fortsätter längs den nya linjen.
<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>
Kolumnbrytningar
Att bryta kolumner till en ny rad i flexbox kräver ett litet hack: lägg till ett element med width: 100%
var du vill slå in dina kolumner till en ny rad. Normalt uppnås detta med flera .row
s, men inte alla implementeringsmetoder kan förklara detta.
<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 också tillämpa denna paus vid specifika brytpunkter med våra responsiva displayverktyg .
<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>
Omordning
Beställ klasser
Använd .order-
klasser för att kontrollera den visuella ordningen på ditt innehåll. Dessa klasser är lyhörda, så du kan ställa in order
brytpunkten (t.ex. .order-1.order-md-2
). Inkluderar stöd för 1
genomgående 5
över alla sex rutnätsnivåer.
<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>
Det finns också responsiva .order-first
och .order-last
klasser som ändrar order
ett elements genom att tillämpa order: -1
respektive order: 6
. Dessa klasser kan också blandas med de numrerade .order-*
klasserna 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>
Förskjutning av kolumner
Du kan förskjuta rutnätskolumner på två sätt: våra responsiva .offset-
rutnätsklasser och våra marginalverktyg . Rutnätsklasser är dimensionerade för att matcha kolumner medan marginaler är mer användbara för snabba layouter där bredden på offset är variabel.
Offsetklasser
Flytta kolumner till höger med .offset-md-*
klasser. Dessa klasser ökar den vänstra marginalen i en kolumn med *
kolumner. .offset-md-4
Flyttar till exempel .col-md-4
över fyra kolumner.
<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>
Förutom kolumnrensning vid responsiva brytpunkter kan du behöva återställa offset. Se detta i aktion i rutnätsexemplet .
<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>
Marginalverktyg
Med övergången till flexbox i v4 kan du använda marginalverktyg som .me-auto
att tvinga bort syskonkolumner från varandra.
<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>
Fristående kolumnklasser
Klasserna .col-*
kan även användas utanför a .row
för att ge ett element en specifik bredd. Närhelst kolumnklasser används som icke direkta underordnade av en rad, utelämnas utfyllnaderna.
<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>
Klasserna kan användas tillsammans med verktyg för att skapa responsiva flytande bilder. Se till att linda in innehållet i ett .clearfix
omslag för att rensa flottören om texten är kortare.
Ett stycke med platshållartext. Vi använder det här för att visa användningen av clearfix-klassen. Vi lägger till en hel del meningslösa fraser här för att visa hur kolumnerna interagerar här med den flytande bilden.
Som du kan se sveper styckena elegant runt den flytande bilden. Föreställ dig nu hur det här skulle se ut med lite faktisk innehåll här, snarare än bara den här tråkiga platshållartexten som fortsätter och fortsätter, men som faktiskt inte förmedlar någon påtaglig information. Den tar helt enkelt plats och ska egentligen inte läsas.
Och ändå, här är du, fortfarande ihärdig att läsa den här platshållartexten, i hopp om några fler insikter eller något gömt påskägg med innehåll. Ett skämt kanske. Tyvärr finns det inget av det här.
<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>