Behållare
Behållare är en grundläggande byggsten i Bootstrap som innehåller, fyller och anpassar ditt innehåll inom en given enhet eller visningsport.
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 amax-width
vid varje responsiv brytpunkt.container-fluid
, vilket ärwidth: 100%
vid alla brytpunkter.container-{breakpoint}
, vilket ärwidth: 100%
tills den angivna brytpunkten
Tabellen nedan illustrerar hur varje behållare max-width
jämförs med originalet .container
och .container-fluid
över varje brytpunkt.
Se dem i aktion och jämför dem i vårt Grid-exempel .
Extra liten <576px |
Liten ≥576 pixlar |
Medium ≥768 px |
Stor ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100 % | 540 pixlar | 720 pixlar | 960 pixlar | 1140 pixlar | 1320 pixlar |
.container-sm |
100 % | 540 pixlar | 720 pixlar | 960 pixlar | 1140 pixlar | 1320 pixlar |
.container-md |
100 % | 100 % | 720 pixlar | 960 pixlar | 1140 pixlar | 1320 pixlar |
.container-lg |
100 % | 100 % | 100 % | 960 pixlar | 1140 pixlar | 1320 pixlar |
.container-xl |
100 % | 100 % | 100 % | 100 % | 1140 pixlar | 1320 pixlar |
.container-xxl |
100 % | 100 % | 100 % | 100 % | 100 % | 1320 pixlar |
.container-fluid |
100 % | 100 % | 100 % | 100 % | 100 % | 100 % |
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-width
s för var och en av de högre brytpunkterna. Till exempel .container-sm
är 100 % bred för att starta tills sm
brytpunkten 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-fluid
fö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 .