Containere

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 a max-widthved hvert responsivt brudpunkt
• .container-fluid, som er width: 100%på alle brudpunkter
• .container-{breakpoint}, hvilket er width: 100%indtil det angivne brudpunkt

Tabellen nedenfor illustrerer, hvordan hver beholder er max-widthsammenlignet med originalen .containerog .container-fluidpå tværs af hvert brudpunkt.

Se dem i aktion, og sammenlign dem i vores Grid-eksempel .

Standardbeholder

Vores standardklasse .containerer 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-widths for hvert af de højere breakpoints. For eksempel .container-smer den 100 % bred for at starte, indtil smbrudpunktet 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-fluidtil 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 .