Twe kɔ emu nsɛm atitiriw no so Twe kɔ docs navigation so
in English

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-widthwɔ 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-widthde toto mfitiaseɛ no .containerho ne .container-fluidbreakpoint 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 .containerclass no yɛ mmuaeɛ, fixed-width container, a ɛkyerɛ ne max-widthnsakrae�� 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-widths 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 smbreakpoint 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-fluidma 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 .