Containere
Beholdere er en grunnleggende byggestein i Bootstrap som inneholder, fyller og justerer innholdet ditt innenfor en gitt enhet eller visningsport.
Hvordan de fungerer
Beholdere er det mest grunnleggende layoutelementet i Bootstrap og kreves når du bruker vårt standard rutenettsystem . Beholdere brukes til å inneholde, fylle og (noen ganger) sentrere innholdet i dem. Selv om containere kan nestes, krever de fleste oppsett ikke en nestet container.
Bootstrap kommer med tre forskjellige beholdere:
.container
, som setter amax-width
ved hvert responsivt bruddpunkt.container-fluid
, som erwidth: 100%
på alle bruddpunkter.container-{breakpoint}
, som erwidth: 100%
til det angitte bruddpunktet
Tabellen nedenfor illustrerer hvordan hver beholder er max-width
sammenlignet med originalen .container
og .container-fluid
på tvers av hvert bruddpunkt.
Se dem i aksjon og sammenlign dem i Grid-eksemplet vårt .
Ekstra liten <576px |
Liten ≥576 piksler |
Middels ≥768 piksler |
Stor ≥992 piksler |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100 % | 540 piksler | 720 piksler | 960 piksler | 1140 piksler | 1320 piksler |
.container-sm |
100 % | 540 piksler | 720 piksler | 960 piksler | 1140 piksler | 1320 piksler |
.container-md |
100 % | 100 % | 720 piksler | 960 piksler | 1140 piksler | 1320 piksler |
.container-lg |
100 % | 100 % | 100 % | 960 piksler | 1140 piksler | 1320 piksler |
.container-xl |
100 % | 100 % | 100 % | 100 % | 1140 piksler | 1320 piksler |
.container-xxl |
100 % | 100 % | 100 % | 100 % | 100 % | 1320 piksler |
.container-fluid |
100 % | 100 % | 100 % | 100 % | 100 % | 100 % |
Standard beholder
Standardklassen vår .container
er en responsiv beholder med fast bredde, noe som betyr at den max-width
endres ved hvert bruddpunkt.
<div class="container">
<!-- Content here -->
</div>
Responsive containere
Responsive containere lar deg spesifisere en klasse som er 100 % bred til det spesifiserte bruddpunktet er nådd, hvoretter vi bruker max-width
s for hvert av de høyere bruddpunktene. Er for eksempel .container-sm
100 % bred for å starte til sm
bruddpunktet er nådd, hvor den skaleres opp 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
Bruk .container-fluid
for en beholder i full bredde, som spenner over hele bredden av visningsporten.
<div class="container-fluid">
...
</div>
Sass
Som vist ovenfor genererer Bootstrap en serie forhåndsdefinerte containerklasser for å hjelpe deg med å bygge oppsettene du ønsker. Du kan tilpasse disse forhåndsdefinerte containerklassene ved å endre Sass-kartet (finnes i _variables.scss
) som driver dem:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
I tillegg til å tilpasse Sass, kan du også lage dine egne beholdere 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();
}
For mer informasjon og eksempler på hvordan du endrer våre Sass-kart og variabler, se Sass-delen av Grid-dokumentasjonen .