Container

Wéi si schaffen

Container sinn dat meescht Basis Layout Element am Bootstrap a si erfuerderlech wann Dir eise Standard Gitter System benotzt . Container gi benotzt fir den Inhalt an hinnen ze enthalen, ze paddelen an (heiansdo) ze zentréieren. Wärend Container nestéiert kënne ginn, erfuerderen déi meescht Layouten keen nestéierte Container.

Bootstrap kënnt mat dräi verschiddene Container:

• .container, déi e max-widthbei all reaktiounsfäeger Breakpoint setzt
• .container-fluid, déi width: 100%op all breakpoints ass
• .container-{breakpoint}, wat width: 100%bis zum spezifizéierte Breakpunkt ass

D'Tabell hei ënnen illustréiert wéi all Container max-widthmat dem Original .containeran .container-fluidiwwer all Breakpunkt vergläicht.

Kuckt se an Aktioun a vergläicht se an eisem Grid Beispill .

Standard Container

Eis Standardklass .containerass e reaktiounsfäeger, fixer Breet Container, dat heescht seng max-widthÄnnerungen op all Breakpoint.

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

Reaktiounsfäeger Container

Reaktiounsfäeger Behälter erlaabt Iech eng Klass ze spezifizéieren déi 100% breet ass bis de spezifizéierte Breakpoint erreecht ass, duerno gëlle mir max-widths fir jiddereng vun den héije Breakpunkten. Zum Beispill .container-smass 100% breet fir unzefänken bis de smBreakpunkt erreecht gëtt, wou et mat md, lg, xl, an 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>

Flësseg Container

Benotzt .container-fluidfir eng voll Breet Container, Spannung der ganzer Breet vun der viewport.

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

Sass

Wéi uewen gewisen, generéiert Bootstrap eng Serie vu virdefinéierte Containerklassen fir Iech ze hëllefen d'Layouten ze bauen déi Dir wëllt. Dir kënnt dës virdefinéiert Containerklassen personaliséieren andeems Dir d'Sass Kaart ännert (fonnt an _variables.scss) déi se dréit:

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

Zousätzlech fir de Sass ze personaliséieren, kënnt Dir och Är eege Container mat eisem Sass Mixin erstellen.

// 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();
}

Fir méi Informatioun a Beispiller wéi Dir eis Sass Kaarten a Variablen ännere kënnt, kuckt w.e.g. op d'Sass Sektioun vun der Grid Dokumentatioun .