in English

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.

På denne side

Heads up! Sørg for at læse Grid-siden først, før du dykker ned i, hvordan du ændrer og tilpasser dine gitterkolonner.

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

En af tre kolonner

html

<div class="container text-center">
  <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 af tre kolonner

html

<div class="container text-center">
  <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

En af to kolonner

html

<div class="container text-center">
  <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.

.col-9

.col-4
Da 9 + 4 = 13 > 12, bliver denne 4-kolonne brede div indpakket på en ny linje som en sammenhængende enhed.

.col-6
Efterfølgende kolonner fortsætter langs den nye linje.

html

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

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 .rows, men ikke alle implementeringsmetoder kan tage højde for dette.

.col-6 .col-sm-3

html

<div class="container text-center">
  <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 .

.col-6 .col-sm-4

html

<div class="container text-center">
  <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 orderefter breakpoint (f.eks. .order-1.order-md-2). Inkluderer støtte til 1gennem 5alle seks gitterniveauer.

Først i DOM, ingen ordre anvendt

Anden i DOM, med en større ordre

Tredje i DOM, med en rækkefølge på 1

html

<div class="container text-center">
  <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-firstog .order-lastklasser, der ændrer orderet elements ved at anvende order: -1og order: 6hhv. Disse klasser kan også blandes med de nummererede .order-*klasser efter behov.

Først i DOM, bestilt sidst

Anden i DOM, uordnet

Tredje i DOM, bestilt først

html

<div class="container text-center">
  <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-4Flytter for eksempel .col-md-4over fire kolonner.

.col-md-4

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

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

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

html

<div class="container text-center">
  <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 .

.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

html

<div class="container text-center">
  <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-autoat tvinge søskendekolonner væk fra hinanden.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <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 .rowtil at give et element en bestemt bredde. Når kolonneklasser bruges som ikke-direkte underordnede af en række, udelades udfyldningerne.

.col-3: bredde på 25 %

.col-sm-9: bredde på 75 % over sm brudpunkt

html

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

html

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