in English

Kolonner

Lær hvordan du endrer kolonner med en håndfull alternativer for justering, bestilling og forskyvning takket være vårt flexbox-rutesystem. I tillegg kan du se hvordan du bruker kolonneklasser til å administrere bredder på elementer som ikke er rutenett.

På denne siden

Vær oppmerksom! Sørg for å lese Grid-siden først før du dykker inn i hvordan du endrer og tilpasser rutenettkolonnene dine.

Hvordan de fungerer

Kolonner bygger på rutenettets flexbox-arkitektur. Flexbox betyr at vi har muligheter for å endre individuelle kolonner og modifisere grupper av kolonner på radnivå . Du velger hvordan kolonner vokser, krymper eller på annen måte endres.
Når du bygger rutenettoppsett, går alt innhold i kolonner. Hierarkiet til Bootstraps rutenett går fra beholder til rad til kolonne til innholdet ditt. I sjeldne tilfeller kan du kombinere innhold og spalte, men vær oppmerksom på at det kan få utilsiktede konsekvenser.
Bootstrap inkluderer forhåndsdefinerte klasser for å lage raske, responsive layouter. Med seks bruddpunkter og et dusin kolonner på hvert rutenettnivå, har vi dusinvis av klasser allerede bygget for deg for å lage dine ønskede oppsett. Dette kan deaktiveres via Sass hvis du ønsker det.

Justering

Bruk flexbox-justeringsverktøy for å justere kolonner vertikalt og horisontalt.

Vertikal justering

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

Kolonneinnpakning

Hvis mer enn 12 kolonner er plassert innenfor en enkelt rad, vil hver gruppe ekstra kolonner, som én enhet, pakkes inn på en ny linje.

.col-9

.col-4
Siden 9 + 4 = 13 > 12, blir denne 4-kolonne brede div viklet inn på en ny linje som en sammenhengende enhet.

.col-6
Påfølgende kolonner fortsetter langs den nye linjen.

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>

Kolonneskift

Å bryte kolonner til en ny linje i flexbox krever et lite hack: legg til et element med width: 100%hvor du vil pakke kolonnene til en ny linje. Normalt oppnås dette med flere .rows, men ikke alle implementeringsmetoder kan ta hensyn til 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å bruke denne pausen ved spesifikke pausepunkter med våre responsive displayverktøy .

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

Ombestilling

Bestill klasser

Bruk .order-klasser for å kontrollere den visuelle rekkefølgen på innholdet ditt. Disse klassene er responsive, så du kan angi orderetter bruddpunkt (f.eks. .order-1.order-md-2). Inkluderer støtte for 1gjennomgående 5på tvers av alle seks rutenettlagene.

Først i DOM, ingen bestilling ble brukt

Andre i DOM, med en større ordre

Tredje i DOM, med en rekkefø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>

Det er også responsive klasser .order-firstog .order-lastklasser som endrer orderet element ved å bruke order: -1henholdsvis order: 6og . Disse klassene kan også blandes med de nummererte .order-*klassene etter behov.

Først i DOM, bestilt sist

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

Forskyvning av kolonner

Du kan forskyve rutenettkolonner på to måter: våre responsive .offset-rutenettklasser og våre marginverktøy . Rutenettklasser er dimensjonert for å matche kolonner, mens marginer er mer nyttige for raske oppsett der bredden på forskyvningen er variabel.

Offsetklasser

Flytt kolonner til høyre ved å bruke .offset-md-*klasser. Disse klassene øker venstre marg i 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>

I tillegg til kolonnetømming ved responsive bruddpunkter, kan det hende du må tilbakestille forskyvninger. Se dette i aksjon i rutenetteksemplet .

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

Marginverktøy

Med overgangen til flexbox i v4 kan du bruke marginverktøy som .me-autoå tvinge søskenkolonner bort fra hverandre.

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

Frittstående kolonneklasser

Klassene .col-*kan også brukes utenfor a .rowfor å gi et element en bestemt bredde. Når kolonneklasser brukes som ikke-direkte underordnede av en rad, utelates utfyllingene.

.col-3: bredde på 25 %

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

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>

Klassene kan brukes sammen med verktøy for å lage responsive flytende bilder. Sørg for å pakke innholdet inn i et .clearfixomslag for å fjerne flyten hvis teksten er kortere.

Et avsnitt med plassholdertekst. Vi bruker den her for å vise bruken av clearfix-klassen. Vi legger til ganske mange meningsløse setninger her for å demonstrere hvordan kolonnene samhandler her med det flytende bildet.

Som du kan se, vikler avsnittene elegant rundt det flytende bildet. Tenk deg nå hvordan dette ville se ut med noe faktisk innhold her, i stedet for bare denne kjedelige plassholderteksten som fortsetter og fortsetter, men som faktisk ikke formidler noen håndgripelig informasjon. Den tar rett og slett plass og bør egentlig ikke leses.

Og likevel, her er du, og fortsetter å lese denne plassholderteksten, og håper på litt mer innsikt, eller et skjult påskeegg med innhold. En vits, kanskje. Dessverre er det ingenting av 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>