Behållare

Hur de fungerar

Behållare är det mest grundläggande layoutelementet i Bootstrap och krävs när du använder vårt standardgridsystem . Behållare används för att innehålla, fylla och (ibland) centrera innehållet i dem. Även om behållare kan kapslas, kräver de flesta layouter inte en kapslad container.

Bootstrap kommer med tre olika behållare:

• .container, som ställer in a max-widthvid varje responsiv brytpunkt
• .container-{breakpoint}, vilket är width: 100%tills den angivna brytpunkten
• .container-fluid, vilket är width: 100%vid alla brytpunkter

Tabellen nedan illustrerar hur varje behållare max-widthjämförs med originalet .containeroch .container-fluidöver varje brytpunkt.

Se dem i aktion och jämför dem i vårt Grid-exempel .

Standardbehållare

Vår standardklass .containerär en lyhörd behållare med fast bredd, vilket betyder att dess max-widthändringar vid varje brytpunkt.

<div class="container">
  <!-- Content here -->
</div>

Responsiva behållare

Responsiva behållare låter dig ange en klass som är 100 % bred tills den angivna brytpunkten uppnås, varefter vi tillämpar max-widths för var och en av de högre brytpunkterna. Till exempel .container-smär 100 % bred för att starta tills smbrytpunkten nås, där den skalas upp med md, lg, xl, och xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Vätskebehållare

Använd .container-fluidför en behållare med full bredd som spänner över hela bredden av visningsporten.

<div class="container-fluid">
  ...
</div>

Sass

Som visas ovan genererar Bootstrap en serie fördefinierade containerklasser för att hjälpa dig bygga de layouter du önskar. Du kan anpassa dessa fördefinierade behållarklasser genom att modifiera Sass-kartan (finns i _variables.scss) som driver dem:

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

Förutom att anpassa Sass kan du också skapa dina egna behållare med vår Sass mixin.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

För mer information och exempel på hur du ändrar våra Sass-kartor och variabler, se Sass-avsnittet i Grid-dokumentationen .