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.

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

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.

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

Lika bredd på 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 .

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 dina målwebbläsare inte faller i buggyversionerna.

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

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.

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

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

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.

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

Staplad till horisontell

Med en enda uppsättning .col-sm-*klasser kan du skapa ett grundläggande rutsystem som börjar staplade och blir horisontellt vid den lilla brytpunkten ( 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>

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.

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

Rännor

Rännor kan anpassas responsivt genom brytpunktsspecifik stoppning och nyttoklasser med negativ marginal. För att ändra rännorna i en given rad, para ihop ett verktyg för negativ marginal på .rowoch matchande utfyllnadsverktyg på .cols. Den .containereller .container-fluidföräldern kan behöva justeras också för att undvika oönskad översvämning, genom att återigen använda matchande stoppningsverktyg.

Här är ett exempel på anpassning av Bootstrap-rutnätet vid den stora ( lg) brytpunkten och uppåt. Vi har ökat .colstoppningen med .px-lg-5, motverkat det med .mx-lg-n5på föräldern .rowoch sedan justerat .containeromslaget 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>

Rad kolumner

Använd de responsiva .row-cols-*klasserna för att snabbt ställa in antalet kolumner som bäst återger ditt innehåll och din layout. Medan normala .col-*klasser gäller för de individuella kolumnerna (t.ex. .col-md-4), ställs radkolumnklasserna på den överordnade .rowsom en genväg.

Använd dessa radkolumnklasser för att snabbt skapa grundläggande rutnätslayouter eller för att kontrollera dina kortlayouter.

<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 också använda den medföljande 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);
  }
}

Inriktning

Använd flexbox-justeringsverktyg för att justera kolumner vertikalt och horisontellt. Internet Explorer 10-11 stöder inte vertikal justering av flexobjekt när flexbehållaren har en min-heightsom visas nedan. Se Flexbugs #3 för mer information.

Vertikal inriktning

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

Horisontell linjering

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

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

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.

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

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.

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

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

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.

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

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.

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

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.

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

Förutom kolumnrensning vid responsiva brytpunkter kan du behöva återställa offset. Se detta i aktion i rutnätsexemplet .

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

Marginalverktyg

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

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

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

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

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

<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 bredden (i procent) av varje enskild kolumn samtidigt $grid-gutter-widthsom den ställer in bredden fö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 %).