Nneɛma a wɔde gu mu
Containers yɛ Bootstrap no dan titiriw a ɛwɔ, pad, na ɛne wo nsɛm no hyia wɔ afiri anaa viewport a wɔde ama mu.
Sɛnea wɔyɛ adwuma
Containers yɛ nhyehyɛe element titiriw wɔ Bootstrap mu na ɛho hia bere a wode yɛn default grid nhyehyɛe no redi dwuma no . Wɔde nsukorade di dwuma de kura, pad, na (ɛtɔ mmere bi a) nneɛma a ɛwɔ mu no mfinimfini. Bere a wobetumi ayɛ nkorabata no nest no, nhyehyɛe dodow no ara nhia sɛ wɔde nkorabata a wɔde ahyɛ mu.
Bootstrap no de nneɛma ahorow abiɛsa a wɔde gu mu ba:
.container
, a ɛde a si hɔmax-width
wɔ mmuae a wɔde gyae mu biara mu.container-fluid
, a ɛyɛwidth: 100%
breakpoints biara mu.container-{breakpoint}
, a ɛyɛwidth: 100%
kosi sɛ wobegyae bere a wɔakyerɛ no
Table a ɛwɔ aseɛ ha yi kyerɛ sɛdeɛ container biara max-width
de toto mfitiaseɛ no .container
ho ne .container-fluid
breakpoint biara so.
Hwɛ wɔn wɔ adeyɛ mu na fa toto ho wɔ yɛn Grid nhwɛso no mu .
Nneɛma nketenkete a ɛboro so <576px |
Nketewa a ɛyɛ ≥576px |
Mfinimfini ≥768px |
Ɔkɛseɛ ≥992px |
X- Kyerɛw ≥1200px |
XX- Kyerɛw ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% na ɛwɔ hɔ. | 540px na ɛyɛ | 720px na ɛyɛ | 960px na ɛyɛ | 1140px na ɛyɛ | 1320px na ɛyɛ |
.container-sm |
100% na ɛwɔ hɔ. | 540px na ɛyɛ | 720px na ɛyɛ | 960px na ɛyɛ | 1140px na ɛyɛ | 1320px na ɛyɛ |
.container-md |
100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 720px na ɛyɛ | 960px na ɛyɛ | 1140px na ɛyɛ | 1320px na ɛyɛ |
.container-lg |
100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 960px na ɛyɛ | 1140px na ɛyɛ | 1320px na ɛyɛ |
.container-xl |
100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 1140px na ɛyɛ | 1320px na ɛyɛ |
.container-xxl |
100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 1320px na ɛyɛ |
.container-fluid |
100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. | 100% na ɛwɔ hɔ. |
Default a wɔde hyɛ mu
Yɛn default .container
class no yɛ mmuaeɛ, fixed-width container, a ɛkyerɛ ne max-width
nsakrae�� wɔ breakpoint biara.
<div class="container">
<!-- Content here -->
</div>
Nneɛma a wɔde gu mu a ɛyɛ mmuae
Responsive containers ma wo kwan ma wokyerɛ adesuakuw bi a ɛtrɛw 100% kosi sɛ wobedu breakpoint a wɔakyerɛ no ho, ɛno akyi no yɛde max-width
s di dwuma ma breakpoints a ɛkorɔn no mu biara. Sɛ nhwɛso no, .container-sm
ɛyɛ 100% trɛw sɛ wobefi ase kosi sɛ wobedu sm
breakpoint no ho, baabi a ɛbɛkɔ soro denam md
, lg
, xl
, ne 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>
Nsu a wɔde gu mu
Fa di dwuma .container-fluid
ma ade a ne tɛtrɛtɛ nyinaa, a ɛtrɛw hwɛbea no ntrɛwmu nyinaa.
<div class="container-fluid">
...
</div>
Sass
Sɛnea wɔakyerɛ wɔ atifi hɔ no, Bootstrap no ma wonya container class ahorow a wɔadi kan akyerɛkyerɛ mu a ɛbɛboa wo ma woakyekye nhyehyɛe ahorow a wopɛ. Wubetumi ayɛ saa container class ahorow a wɔakyerɛkyerɛ mu dedaw yi denam Sass map (a wohu wɔ _variables.scss
) a ɛma wonya tumi no a wobɛsakra no so:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Wɔ Sass no a wobɛsesa no akyi no, wobɛtumi nso de yɛn Sass mixin no ayɛ w’ankasa containers.
// 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();
}
Sɛ wopɛ nsɛm pii ne nhwɛsoɔ a ɛfa sɛdeɛ yɛbɛsesa yɛn Sass maps ne variables a, yɛsrɛ wo hwɛ Sass ɔfa a ɛwɔ Grid nkrataa no mu .