Containere
Containere er en grundlæggende byggesten i Bootstrap, der indeholder, puder og justerer dit indhold inden for en given enhed eller visningsport.
Hvordan de virker
Containere er det mest basale layoutelement i Bootstrap og er påkrævet, når du bruger vores standard gittersystem . Containere bruges til at indeholde, polstre og (nogle gange) centrere indholdet i dem. Selvom containere kan indlejres, kræver de fleste layouts ikke en indlejret container.
Bootstrap leveres med tre forskellige beholdere:
.container
, som indstiller amax-width
ved hvert responsivt brudpunkt.container-fluid
, som erwidth: 100%
på alle brudpunkter.container-{breakpoint}
, hvilket erwidth: 100%
indtil det angivne brudpunkt
Tabellen nedenfor illustrerer, hvordan hver beholder er max-width
sammenlignet med originalen .container
og .container-fluid
på tværs af hvert brudpunkt.
Se dem i aktion, og sammenlign dem i vores Grid-eksempel .
Ekstra lille <576px |
Lille ≥576 px |
Medium ≥768 px |
Stor ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100 % | 540 px | 720px | 960px | 1140px | 1320px |
.container-sm |
100 % | 540 px | 720px | 960px | 1140px | 1320px |
.container-md |
100 % | 100 % | 720px | 960px | 1140px | 1320px |
.container-lg |
100 % | 100 % | 100 % | 960px | 1140px | 1320px |
.container-xl |
100 % | 100 % | 100 % | 100 % | 1140px | 1320px |
.container-xxl |
100 % | 100 % | 100 % | 100 % | 100 % | 1320px |
.container-fluid |
100 % | 100 % | 100 % | 100 % | 100 % | 100 % |
Standardbeholder
Vores standardklasse .container
er en responsiv container med fast bredde, hvilket betyder, at dens max-width
ændringer ved hvert brudpunkt.
<div class="container">
<!-- Content here -->
</div>
Responsive containere
Responsive containere giver dig mulighed for at angive en klasse, der er 100 % bred, indtil det angivne breakpoint er nået, hvorefter vi anvender max-width
s for hvert af de højere breakpoints. For eksempel .container-sm
er den 100 % bred for at starte, indtil sm
brudpunktet er nået, hvor den skaleres op med md
, lg
, xl
, og 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æskebeholdere
Bruges .container-fluid
til en beholder i fuld bredde, der spænder over hele visningsportens bredde.
<div class="container-fluid">
...
</div>
Sass
Som vist ovenfor genererer Bootstrap en række foruddefinerede containerklasser for at hjælpe dig med at bygge de layouts, du ønsker. Du kan tilpasse disse foruddefinerede containerklasser ved at ændre Sass-kortet (findes i _variables.scss
), der driver dem:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ud over at tilpasse Sass, kan du også oprette dine egne beholdere med vores 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();
}
For mere information og eksempler på, hvordan man ændrer vores Sass-kort og variabler, henvises til Sass-sektionen i Grid-dokumentationen .