Container
Container sinn e fundamentale Bausteng vu Bootstrap déi Ären Inhalt an engem bestëmmten Apparat oder Viewport enthalen, padden an ausrichten.
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 emax-width
bei all reaktiounsfäeger Breakpoint setzt.container-fluid
, déiwidth: 100%
op all breakpoints ass.container-{breakpoint}
, watwidth: 100%
bis zum spezifizéierte Breakpunkt ass
D'Tabell hei ënnen illustréiert wéi all Container max-width
mat dem Original .container
an .container-fluid
iwwer all Breakpunkt vergläicht.
Kuckt se an Aktioun a vergläicht se an eisem Grid Beispill .
Extra kleng <576px |
Kleng ≥576px |
Mëttelméisseg ≥768px |
Grouss ≥992px |
X-Large ≥1200px |
XX-Large ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 9 60px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 9 60px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 9 60px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 9 60px | 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% |
Default Container
Eis Standardklass .container
ass 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-width
s fir jiddereng vun den héije Breakpunkten. Zum Beispill .container-sm
ass 100% breet fir unzefänken bis de sm
Breakpunkt 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-fluid
fir 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 .