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.

På den här sidan

Se upp! Se till att läsa Grid-sidan först innan du dyker in i hur du ändrar och anpassar dina rutkolumner.

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

En av tre kolumner

<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>

En av tre kolumner

<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

En av två kolumner

<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.

.col-9

.col-4
Eftersom 9 + 4 = 13 > 12, lindas denna 4-kolumn breda div på en ny linje som en sammanhängande enhet.

.col-6
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 &gt; 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 .rows, men inte alla implementeringsmetoder kan förklara detta.

.col-6 .col-sm-3

<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 .

.col-6 .col-sm-4

<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 orderbrytpunkten (t.ex. .order-1.order-md-2). Inkluderar stöd för 1genomgående 5över alla sex rutnätsnivåer.

Först i DOM, ingen beställning tillämpades

Tvåa i DOM, med en större order

Trea i DOM, med en ordning på 1

<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-firstoch .order-lastklasser som ändrar orderett elements genom att tillämpa order: -1respektive order: 6. Dessa klasser kan också blandas med de numrerade .order-*klasserna efter behov.

Först i DOM, beställdes sist

Tvåa i DOM, oordnad

Trea i DOM, beställde först

<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-4Flyttar till exempel .col-md-4över fyra kolumner.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<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 .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<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-autoatt tvinga bort syskonkolumner från varandra.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<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 .rowför att ge ett element en specifik bredd. Närhelst kolumnklasser används som icke direkta underordnade av en rad, utelämnas utfyllnaderna.

.col-3: bredd på 25 %

.col-sm-9: bredd på 75 % över sm brytpunkt

<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 .clearfixomslag 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>