Nneɛma a wɔde gu 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 biara mu breakpoint
• .container-{breakpoint}, a ɛyɛ width: 100%kosi sɛ wobegyae bere a wɔakyerɛ no
• .container-fluid, a ɛyɛ width: 100%breakpoints biara mu

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 .

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 no ho a, yɛsrɛ wo hwɛ Sass ɔfa a ɛwɔ Grid nkrataa no mu .