Source

Gittersystem

Brug vores kraftfulde mobile-first flexbox-gitter til at bygge layouts af alle former og størrelser takket være et tolv kolonnesystem, fem standard responsive niveauer, Sass variabler og mixins og snesevis af foruddefinerede klasser.

Hvordan det virker

Bootstraps gittersystem bruger en række containere, rækker og kolonner til at layoute og justere indhold. Den er bygget med flexbox og er fuldt responsiv. Nedenfor er et eksempel og et dybdegående kig på, hvordan gitteret hænger sammen.

Ny eller ukendt med flexbox? Læs denne CSS Tricks flexbox-guide for baggrund, terminologi, retningslinjer og kodestykker.

En af tre kolonner

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

Ovenstående eksempel opretter tre lige store kolonner på små, mellemstore, store og ekstra store enheder ved hjælp af vores foruddefinerede gitterklasser. Disse kolonner er centreret på siden med den overordnede .container.

Hvis du deler det ned, så virker det her:

Containere giver et middel til at centrere og vandret polstring af dit websteds indhold. Brug .containertil en responsiv pixelbredde eller .container-fluidtil width: 100%på tværs af alle viewport og enhedsstørrelser.
Rækker er omslag til kolonner. Hver søjle har vandret padding(kaldet en rende) til at kontrollere mellemrummet mellem dem. Dette paddingmodvirkes så på rækkerne med negative marginer. På denne måde er alt indhold i dine kolonner visuelt justeret ned til venstre.
I et gitterlayout skal indhold placeres i kolonner, og kun kolonner må være umiddelbare underordnede rækker.
Takket være flexbox vil gitterkolonner uden en specificeret widthautomatisk udformes som kolonner med samme bredde. For eksempel vil fire forekomster af .col-smhver automatisk være 25 % brede fra det lille brudpunkt og opefter. Se afsnittet om kolonner med automatisk layout for flere eksempler.
Kolonneklasser angiver antallet af kolonner, du gerne vil bruge ud af de mulige 12 pr. række. Så hvis du vil have tre lige store kolonner på tværs, kan du bruge .col-4.
Kolonne widths er angivet i procenter, så de altid er flydende og størrelser i forhold til deres overordnede element.
Kolonner har vandret paddingfor at skabe tagrenderne mellem de enkelte kolonner, dog kan du fjerne marginfra rækker og paddingfra kolonner med .no-gutterspå .row.
For at gøre gitteret responsivt er der fem grid breakpoints, et for hvert responsive breakpoint : alle breakpoints (ekstra små), små, mellemstore, store og ekstra store.
Gitterbrudpunkter er baseret på medieforespørgsler med minimum bredde, hvilket betyder, at de gælder for det ene brudpunkt og alle dem over det ( .col-sm-4gælder f.eks. små, mellemstore, store og ekstra store enheder, men ikke det første xsbrudpunkt).
Du kan bruge foruddefinerede gitterklasser (som .col-4) eller Sass-mixins til mere semantisk markup.

Vær opmærksom på begrænsningerne og fejlene omkring flexbox , såsom manglende evne til at bruge nogle HTML-elementer som flex-beholdere .

Grid muligheder

Mens Bootstrap bruger ems eller rems til at definere de fleste størrelser, pxbruges s til grid breakpoints og containerbredder. Dette skyldes, at visningsportens bredde er i pixels og ikke ændres med skriftstørrelsen .

Se, hvordan aspekter af Bootstrap-gittersystemet fungerer på tværs af flere enheder med en praktisk tabel.

	Ekstra lille <576px	Lille ≥576 px	Medium ≥768 px	Stor ≥992px	Ekstra stor ≥1200px
Max containerbredde	Ingen (auto)	540 px	720px	960px	1140px
Klassepræfiks	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
antal kolonner	12
Tagrendes bredde	30px (15px på hver side af en kolonne)
Nestbar	Ja
Kolonnebestilling	Ja

Auto-layout kolonner

Brug breakpoint-specifikke kolonneklasser for nem kolonnestørrelse uden en eksplicit nummereret klasse som .col-sm-6.

Lige bred

For eksempel er her to gitterlayouts, der gælder for hver enhed og visningsport, fra xstil xl. Tilføj et hvilket som helst antal enhedsløse klasser for hvert breakpoint, du har brug for, og hver kolonne vil have samme bredde.

1 af 2

2 af 2

1 af 3

2 af 3

3 af 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Kolonner med samme bredde kan opdeles i flere linjer, men der var en Safari flexbox-fejl , der forhindrede dette i at fungere uden en eksplicit flex-basiseller border. Der er løsninger til ældre browserversioner, men de burde ikke være nødvendige, hvis du er opdateret.

Kolonne

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Indstilling af én kolonnebredde

Auto-layout for flexbox-gitterkolonner betyder også, at du kan indstille bredden af en kolonne og automatisk ændre størrelsen på søskendekolonnerne omkring den. Du kan bruge foruddefinerede gitterklasser (som vist nedenfor), gitterblandinger eller inline-bredder. Bemærk, at de andre kolonner vil ændre størrelsen, uanset bredden af den midterste kolonne.

1 af 3

2 af 3 (bredere)

3 af 3

1 af 3

2 af 3 (bredere)

3 af 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Indhold med variabel bredde

Brug col-{breakpoint}-autoklasser til at dimensionere kolonner baseret på den naturlige bredde af deres indhold.

1 af 3

Indhold med variabel bredde

3 af 3

1 af 3

Indhold med variabel bredde

3 af 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Ens bred multi-række

Opret kolonner med samme bredde, der spænder over flere rækker, ved at indsætte et .w-100, hvor du ønsker, at kolonnerne skal brydes til en ny linje. Gør pauserne responsive ved at blande dem .w-100med nogle responsive display-værktøjer .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Responsive klasser

Bootstraps gitter inkluderer fem niveauer af foruddefinerede klasser til at bygge komplekse responsive layouts. Tilpas størrelsen af dine kolonner på ekstra små, små, mellemstore, store eller ekstra store enheder, som du finder passende.

Alle brudpunkter

For gitter, der er ens fra den mindste enhed til den største, skal du bruge klasserne .colog . .col-*Angiv en nummereret klasse, når du har brug for en kolonne af særlig størrelse; ellers er du velkommen til at holde dig til .col.

col

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Stablet til vandret

Ved at bruge et enkelt sæt .col-sm-*klasser kan du oprette et grundlæggende gittersystem, der starter stablet, før det bliver vandret med ved det lille brudpunkt ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mix og match

Vil du ikke have, at dine kolonner blot skal stables i nogle gitterniveauer? Brug en kombination af forskellige klasser for hvert niveau efter behov. Se eksemplet nedenfor for en bedre idé om, hvordan det hele fungerer.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Justering

Brug flexbox-justeringsværktøjer til at justere kolonner lodret og vandret.

Lodret justering

En af tre kolonner

<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 af tre kolonner

<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

En af to kolonner

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

Ingen tagrender

Tagrenderne mellem søjler i vores foruddefinerede gitterklasser kan fjernes med .no-gutters. Dette fjerner de negative margins fra .rowog de vandrette paddingfra alle umiddelbare underordnede kolonner.

Her er kildekoden til at skabe disse stilarter. Bemærk, at kolonnetilsidesættelser kun er omfattet af de første underordnede kolonner og målrettes via attributvælger . Selvom dette genererer en mere specifik vælger, kan søjleudfyldning stadig tilpasses yderligere med afstandsværktøjer .

Har du brug for et kant-til-kant-design? Drop forælderen .containereller .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

I praksis ser det sådan ud. Bemærk, at du kan fortsætte med at bruge dette med alle andre foruddefinerede gitterklasser (inklusive kolonnebredder, responsive niveauer, genbestillinger og mere).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</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.

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

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

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

Du kan også anvende denne pause ved specifikke pausepunkter med vores responsive display-værktøjer .

.col-6 .col-sm-4

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

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 12alle fem gitterniveauer.

Først, men uordnet

Andet, men sidst

For det tredje, men først

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Der er også responsive .order-firstog .order-lastklasser, der ændrer orderet elements ved at anvende henholdsvis order: -1og order: 13( order: $columns + 1). Disse klasser kan også blandes med de nummererede .order-*klasser efter behov.

Først, men sidst

For det andet, men uordnet

For det tredje, men først

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but 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

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

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

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

Marginværktøjer

Med skiftet til flexbox i v4 kan du bruge margin-værktøjer som .mr-autoat tvinge søskendekolonner væk fra hinanden.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Indlejring

For at indlejre dit indhold med standardgitteret skal du tilføje en ny .rowog et sæt .col-sm-*kolonner i en eksisterende .col-sm-*kolonne. Indlejrede rækker skal indeholde et sæt kolonner, der tæller op til 12 eller færre (det er ikke påkrævet, at du bruger alle 12 tilgængelige kolonner).

Niveau 1: .col-sm-9

Niveau 2: .col-8 .col-sm-6

Niveau 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sasse blandinger

Når du bruger Bootstraps kilde Sass-filer, har du mulighed for at bruge Sass-variabler og mixins til at skabe brugerdefinerede, semantiske og responsive sidelayouts. Vores foruddefinerede grid-klasser bruger de samme variabler og mixins for at give en hel række klar-til-brug-klasser til hurtigt responsive layouts.

Variabler

Variabler og kort bestemmer antallet af kolonner, rendebredden og det medieforespørgselspunkt, hvor flydende kolonner skal begynde. Vi bruger disse til at generere de foruddefinerede gitterklasser, der er dokumenteret ovenfor, såvel som til de brugerdefinerede mixins, der er angivet nedenfor.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Mixins bruges sammen med gittervariablerne til at generere semantisk CSS for individuelle gitterkolonner.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Eksempel på brug

Du kan ændre variablerne til dine egne brugerdefinerede værdier, eller bare bruge mixins med deres standardværdier. Her er et eksempel på brug af standardindstillingerne til at skabe et to-kolonne layout med et mellemrum mellem.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Hovedindhold

Sekundært indhold

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Tilpasning af gitteret

Ved at bruge vores indbyggede gitter Sass-variabler og -kort er det muligt helt at tilpasse de foruddefinerede gitterklasser. Skift antallet af lag, medieforespørgselsdimensionerne og containerbredderne – og kompilér derefter igen.

Søjler og tagrender

Antallet af gitterkolonner kan ændres via Sass-variabler. $grid-columnsbruges til at generere bredderne (i procent) af hver enkelt søjle, samtidig med $grid-gutter-widthat det tillader brudpunktspecifikke bredder, der er fordelt jævnt på tværs padding-leftog padding-rightfor søjlerrenderne.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Grid tiers

Går du ud over selve kolonnerne, kan du også tilpasse antallet af gitterniveauer. Hvis du kun ville have fire gitterniveauer, ville du opdatere $grid-breakpointsog $container-max-widthstil noget som dette:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Når du foretager ændringer i Sass-variablerne eller -kortene, skal du gemme dine ændringer og kompilere igen. Hvis du gør det, udlæses et helt nyt sæt foruddefinerede gitterklasser for kolonnebredder, forskydninger og bestilling. Responsive synlighedsværktøjer vil også blive opdateret til at bruge de tilpassede brudpunkter. Sørg for at indstille gitterværdier i px(ikke rem, em, eller %).