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.

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

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

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.

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

Ens bredde multi-line

Opret kolonner med samme bredde, der spænder over flere linjer, 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 .w-100dem med nogle responsive display-værktøjer .

Der var en Safari flexbox-fejl , der forhindrede dette i at virke uden en eksplicit flex-basiseller border. Der er løsninger til ældre browserversioner, men de burde ikke være nødvendige, hvis dine målbrowsere ikke falder ind i buggy-versionerne.

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

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

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

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.

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

Stablet til vandret

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

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

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

Tagrender

Tagrender kan justeres responsivt ved hjælp af breakpoint-specifik polstring og nytteklasser med negativ margin. For at ændre tagrenderne i en given række skal du parre et negativt marginværktøj på .rowog matchende polstringsværktøj på .cols. Forælderen .containereller .container-fluidforælderen skal muligvis også justeres for at undgå uønsket overløb, ved at bruge igen matchende polstringsværktøj.

Her er et eksempel på tilpasning af Bootstrap-gitteret ved det store ( lg) brudpunkt og derover. Vi har øget .colpolstringen med .px-lg-5, modvirket det med .mx-lg-n5på forælderen .rowog derefter justeret .containerindpakningen med .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Række kolonner

Brug de responsive .row-cols-*klasser til hurtigt at indstille antallet af kolonner, der bedst gengiver dit indhold og dit layout. Hvor normale .col-*klasser gælder for de individuelle kolonner (f.eks. .col-md-4), er rækkekolonneklasserne indstillet på overordnet .rowsom en genvej.

Brug disse rækkekolonnerklasser til hurtigt at oprette grundlæggende gitterlayouts eller til at styre dine kortlayouts.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Du kan også bruge den medfølgende Sass mixin row-cols(),:

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Justering

Brug flexbox-justeringsværktøjer til at justere kolonner lodret og vandret. Internet Explorer 10-11 understøtter ikke lodret justering af flex-emner, når flex-beholderen har en min-heightsom vist nedenfor. Se Flexbugs #3 for flere detaljer.

Lodret justering

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

Horisontal justering

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

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

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

<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 også anvende denne pause ved specifikke pausepunkter med vores responsive display-værktøjer .

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

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.

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      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 henholdsvis order: -1og order: 13( order: $columns + 1). Disse klasser kan også blandes med de nummererede .order-*klasser 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>

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.

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

Ud over kolonnerydning ved responsive breakpoints, skal du muligvis nulstille forskydninger. Se dette i aktion i gittereksemplet .

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

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.

<div class="container">
  <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>
</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).

<div class="container">
  <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>
</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);
  }
}

<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, mens $grid-gutter-widthden indstiller bredden for 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 %).