Container te pawh a awm
Containers hi Bootstrap building block bulpui ber a ni a, device emaw viewport emaw pek chhunga i content awmte chu a awm a, a pad a, a align bawk.
An hnathawh dan
Containers hi Bootstrap a layout element bulpui ber a ni a , kan default grid system kan hman hunah a mamawh a ni . Container te hi an chhunga thu awmte dahkhawmna, pad, leh (a chang chuan) center-na atan hman a ni. Container te hi nest theih a nih laiin, layout tam zawkah chuan nested container a ngai lo.
Bootstrap hian container hrang hrang pathum a keng tel a:
.container
max-width
, chu chuan responsive breakpoint tinah a set a.container-fluid
, chu chuwidth: 100%
breakpoint zawng zawngah a awm.container-{breakpoint}
, chu chuwidth: 100%
breakpoint tarlan thleng a ni
A hnuaia table hian container tinte max-width
chu original nen an khaikhin dan .container
leh .container-fluid
breakpoint tin across dan a tarlang a ni.
An thiltih danah en la kan Grid entirnan tehkhin rawh .
A tlem zawk <576px |
A te ≥576px a ni |
A laihawl ≥768px a ni |
A lian ≥992px a ni |
X- Lar ≥1200px a ni |
XX-A lian ≥1400px a ni |
|
---|---|---|---|---|---|---|
.container |
100% a ni. | 540px a ni | 720px a ni | 960px a ni | 1140px a ni | 1320px a ni |
.container-sm |
100% a ni. | 540px a ni | 720px a ni | 960px a ni | 1140px a ni | 1320px a ni |
.container-md |
100% a ni. | 100% a ni. | 720px a ni | 960px a ni | 1140px a ni | 1320px a ni |
.container-lg |
100% a ni. | 100% a ni. | 100% a ni. | 960px a ni | 1140px a ni | 1320px a ni |
.container-xl |
100% a ni. | 100% a ni. | 100% a ni. | 100% a ni. | 1140px a ni | 1320px a ni |
.container-xxl |
100% a ni. | 100% a ni. | 100% a ni. | 100% a ni. | 100% a ni. | 1320px a ni |
.container-fluid |
100% a ni. | 100% a ni. | 100% a ni. | 100% a ni. | 100% a ni. | 100% a ni. |
Container hmasa ber a ni
Kan default .container
class hi responsive, fixed-width container a ni a, max-width
breakpoint tinah a inthlak tihna a ni.
<div class="container">
<!-- Content here -->
</div>
Responsive container te pawh a awm bawk
Responsive container hian breakpoint tarlan a thlen hma loh chuan 100% wide class a specify thei a, chu mi hnuah max-width
breakpoint sang zawk pakhat zel atan s kan apply thei a ni. Entirnan, breakpoint a thlen .container-sm
thlenga tan turin 100% wide a ni a, chutah chuan , , , leh sm
hmangin a scale up ang .md
lg
xl
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>
Fluid dahna tur a awm bawk
Full width container atan hmang la .container-fluid
, viewport zau zawng zawng a huam vek ang.
<div class="container-fluid">
...
</div>
Sass a ni
A chunga kan hmuh ang hian Bootstrap hian i duh ang layout siam turin predefined container class series a siam chhuak a. Heng predefined container class te hi an power pe tu Sass map (found in _variables.scss
) chu siam danglamin i customize thei ang:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Sass customize bakah hian kan Sass mixin hmang hian mahni container pawh i siam thei bawk.
// 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();
}
Kan Sass map leh variable te siam danglam dan tur hriat belh leh entirnan Grid documentation a Sass section ah hian en la .