Source

Rutsystem

Använd vårt kraftfulla mobilförsta flexbox-rutnät för att bygga layouter av alla former och storlekar tack vare ett tolv kolumnsystem, fem standardresponsnivåer, Sass-variabler och mixins och dussintals fördefinierade klasser.

Hur det fungerar

Bootstraps rutsystem använder en serie behållare, rader och kolumner för att layouta och anpassa innehåll. Den är byggd med flexbox och är helt lyhörd. Nedan är ett exempel och en fördjupad titt på hur rutnätet går ihop.

Ny eller obekant med flexbox? Läs denna CSS Tricks flexbox-guide för bakgrund, terminologi, riktlinjer och kodavsnitt.

En av tre kolumner

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

Ovanstående exempel skapar tre lika breda kolumner på små, medelstora, stora och extra stora enheter med våra fördefinierade rutnätsklasser. Dessa kolumner är centrerade på sidan med den överordnade .container.

För att dela upp det, så här fungerar det:

Behållare är ett sätt att centrera och horisontellt vaddera din webbplats innehåll. Använd .containerför en responsiv pixelbredd eller .container-fluidför width: 100%alla visningsportar och enhetsstorlekar.
Rader är omslag för kolumner. Varje kolumn har horisontell padding(kallad ränna) för att kontrollera utrymmet mellan dem. Detta paddingmotverkas sedan på raderna med negativa marginaler. På så sätt är allt innehåll i dina kolumner visuellt justerat ner till vänster.
I en rutnätslayout måste innehåll placeras i kolumner och endast kolumner får vara omedelbara underordnade rader.
Tack vare flexbox kommer rutnätskolumner utan en angiven widthautomatiskt layoutas som lika breda kolumner. Till exempel kommer fyra instanser av .col-smvar och en automatiskt att vara 25 % bred från den lilla brytpunkten och uppåt. Se avsnittet kolumner för automatisk layout för fler exempel.
Kolumnklasser anger antalet kolumner du vill använda av de 12 möjliga per rad. Så om du vill ha tre lika breda kolumner över kan du använda .col-4.
Kolumner widthär inställda i procent, så de är alltid flytande och dimensionerade i förhållande till deras överordnade element.
Kolumner har horisontella paddingför att skapa rännor mellan enskilda kolumner, men du kan ta bort marginfrån rader och paddingfrån kolumner med .no-gutterspå .row.
För att göra rutnätet responsivt finns det fem rutnätsbrytpunkter, en för varje responsiv brytpunkt : alla brytpunkter (extra små), små, medelstora, stora och extra stora.
Rutnätsbrytpunkter baseras på mediefrågor med minsta bredd, vilket innebär att de gäller för den ena brytpunkten och alla de ovanför (gäller t.ex. .col-sm-4små, medelstora, stora och extra stora enheter, men inte den första xsbrytpunkten).
Du kan använda fördefinierade rutnätsklasser (som .col-4) eller Sass mixins för mer semantisk uppmärkning.

Var medveten om begränsningarna och buggarna kring flexbox , som oförmågan att använda vissa HTML-element som flexbehållare .

Rutnätsalternativ

Medan Bootstrap använder ems eller rems för att definiera de flesta storlekar, pxanvänds s för rutnätsbrytpunkter och behållarbredder. Detta beror på att visningsportens bredd är i pixlar och inte ändras med teckenstorleken .

Se hur delar av Bootstrap-rutnätssystemet fungerar på flera enheter med en praktisk tabell.

	Extra liten <576px	Liten ≥576 pixlar	Medium ≥768 px	Stor ≥992px	Extra stor ≥1200px
Max containerbredd	Ingen (auto)	540 pixlar	720 pixlar	960 pixlar	1140 pixlar
Klassprefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Antal kolumner	12
Rännans bredd	30px (15px på varje sida av en kolumn)
Nestbar	Ja
Kolumnordning	Ja

Automatisk layout av kolumner

Använd brytpunktsspecifika kolumnklasser för enkel kolumnstorlek utan en explicit numrerad klass som .col-sm-6.

Lika bredd

Här är till exempel två rutnätslayouter som gäller för varje enhet och visningsport, från xstill xl. Lägg till valfritt antal enhetslösa klasser för varje brytpunkt du behöver och varje kolumn kommer att ha samma bredd.

1 av 2

2 av 2

1 av 3

2 av 3

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

Kolumner med lika bredd kan delas upp i flera rader, men det fanns en Safari flexbox-bugg som hindrade detta från att fungera utan en explicit flex-basiseller border. Det finns lösningar för äldre webbläsarversioner, men de borde inte vara nödvändiga om du är uppdaterad.

Kolumn

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

Ställa in en kolumnbredd

Automatisk layout för flexbox-rutnätskolumner innebär också att du kan ställa in bredden på en kolumn och få syskonkolumnerna automatiskt att ändra storlek runt den. Du kan använda fördefinierade rutnätsklasser (som visas nedan), rutnätsblandningar eller inline-bredder. Observera att de andra kolumnerna kommer att ändra storlek oavsett bredden på mittkolumnen.

1 av 3

2 av 3 (bredare)

3 av 3

1 av 3

2 av 3 (bredare)

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

Variabel bredd innehåll

Använd col-{breakpoint}-autoklasser för att anpassa kolumner baserat på innehållets naturliga bredd.

1 av 3

Variabel bredd innehåll

3 av 3

1 av 3

Variabel bredd innehåll

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

Lika breda flera rader

Skapa lika breda kolumner som spänner över flera rader genom att infoga en .w-100där du vill att kolumnerna ska delas till en ny rad. Gör pauserna responsiva genom att blanda .w-100med några responsiva displayverktyg .

kol

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

Responsiva klasser

Bootstraps rutnät innehåller fem nivåer av fördefinierade klasser för att bygga komplexa responsiva layouter. Anpassa storleken på dina kolumner på extra små, små, medelstora, stora eller extra stora enheter som du vill.

Alla brytpunkter

För rutnät som är samma från den minsta till den största, använd klasserna .coloch . .col-*Ange en numrerad klass när du behöver en särskilt stor kolumn; annars får du gärna hålla dig till .col.

kol

kol-8

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

Staplad till horisontell

Med en enda uppsättning .col-sm-*klasser kan du skapa ett grundläggande rutsystem som börjar staplas innan det blir horisontellt med den lilla brytpunkten ( sm).

kol-sm-8

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

Mixa och matcha

Vill du inte att dina kolumner bara staplas i vissa rutnätsnivåer? Använd en kombination av olika klasser för varje nivå efter behov. Se exemplet nedan för en bättre uppfattning om hur det hela fungerar.

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

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>

Inga hängrännor

Rännorna mellan kolumner i våra fördefinierade rutnätsklasser kan tas bort med .no-gutters. Detta tar bort negativa margins från .rowoch horisontella paddingfrån alla omedelbara underordnade kolumner.

Här är källkoden för att skapa dessa stilar. Observera att kolumnöverstyrningar endast omfattas av de första underordnade kolumnerna och riktas via attributväljaren . Även om detta genererar en mer specifik väljare, kan kolumnutfyllnad fortfarande anpassas ytterligare med avståndsverktyg .

Behöver du en kant-till-kant-design? Släpp föräldern .containereller .container-fluid.

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

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

I praktiken ser det ut så här. Observera att du kan fortsätta att använda detta med alla andra fördefinierade rutnätsklasser (inklusive kolumnbredder, responsiva nivåer, ombeställningar och mer).

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

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

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="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 också tillämpa denna paus vid specifika brytpunkter med våra responsiva displayverktyg .

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

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 12över alla fem rutnätsnivåer.

Först, men oordnad

Andra, men sist

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>

Det finns också responsiva .order-firstoch .order-lastklasser som ändrar orderett elements genom att tillämpa order: -1respektive order: 13( order: $columns + 1). Dessa klasser kan också blandas med de numrerade .order-*klasserna efter behov.

Först, men sist

För det andra, men oordnat

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>

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

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

Marginalverktyg

Med övergången till flexbox i v4 kan du använda marginalverktyg som .mr-autoatt tvinga bort syskonkolumner från varandra.

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

Häckande

För att kapsla ditt innehåll med standardrutnätet, lägg till en ny .rowoch uppsättning .col-sm-*kolumner i en befintlig .col-sm-*kolumn. Kapslade rader bör innehålla en uppsättning kolumner som summerar till 12 eller färre (det krävs inte att du använder alla 12 tillgängliga kolumner).

Nivå 1: .col-sm-9

Nivå 2: .col-8 .col-sm-6

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

Sass mixins

När du använder Bootstraps käll-Sass-filer har du möjlighet att använda Sass-variabler och mixins för att skapa anpassade, semantiska och responsiva sidlayouter. Våra fördefinierade rutnätsklasser använder samma variabler och mixins för att tillhandahålla en hel uppsättning färdiga klasser för snabb responsiva layouter.

Variabler

Variabler och kartor bestämmer antalet kolumner, rännstenens bredd och mediefrågepunkten där flytande kolumner ska börja. Vi använder dessa för att generera de fördefinierade rutnätsklasserna som dokumenterats ovan, såväl som för de anpassade mixin som listas nedan.

$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 används tillsammans med rutnätsvariablerna för att generera semantisk CSS för enskilda rutkolumner.

// 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);

Exempel användning

Du kan ändra variablerna till dina egna anpassade värden, eller bara använda mixinerna med deras standardvärden. Här är ett exempel på hur du använder standardinställningarna för att skapa en layout med två kolumner med ett mellanrum mellan.

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

Huvudinnehåll

Sekundärt innehåll

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

Anpassa rutnätet

Med hjälp av våra inbyggda Sass-variabler och kartor är det möjligt att helt anpassa de fördefinierade rutnätsklasserna. Ändra antalet nivåer, mediefrågans dimensioner och behållarbredderna – kompilera sedan om.

Kolumner och hängrännor

Antalet rutnätskolumner kan ändras via Sass-variabler. $grid-columnsanvänds för att generera bredderna (i procent) av varje enskild kolumn samtidigt som $grid-gutter-widthdet tillåter brytpunktsspecifika bredder som är jämnt uppdelade över padding-leftoch padding-rightför kolumnrännorna.

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

Grid nivåer

Om du går bortom själva kolumnerna kan du också anpassa antalet rutnätsnivåer. Om du bara ville ha fyra rutnätsnivåer skulle du uppdatera $grid-breakpointsoch $container-max-widthstill något sånt här:

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

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

När du gör ändringar i Sass-variablerna eller kartorna måste du spara dina ändringar och kompilera om. Om du gör det kommer en helt ny uppsättning fördefinierade rutnätsklasser att matas ut för kolumnbredder, offset och ordning. Responsiva synlighetsverktyg kommer också att uppdateras för att använda de anpassade brytpunkterna. Se till att ställa in rutnätsvärden i px(inte rem, em, eller %).