Kɔntena dɛn

Aw dɛn de wok

Kɔntinɛnt na di mɔs besik layout ɛlimɛnt na Bootstrap ɛn dɛn nid dɛn we yu de yuz wi difɔlt grid sistem . Dɛn kin yuz kɔntena fɔ kɔntinyu, pad, ɛn (sɔntɛnde) sɛnt di tin dɛn we de insay dɛn. Pan ɔl we dɛn kin nest kɔntena dɛn, bɔku pan di layout dɛn nɔ nid kɔntena we dɛn nest.

Bootstrap kam wit tri difrɛn kɔntena dɛn:

• .container, we de sɛt a max-widthna ɛni rispɔnsiv brekpɔynt
• .container-fluid, we width: 100%na ɔl di say dɛn we dɛn kin brok
• .container-{breakpoint}, we na width: 100%te di brekpoint we dɛn dɔn tɔk bɔt

Di tebul we de dɔŋ ya de sho aw ɛni kɔntena in dɛn max-widthkɔmpia to di fɔs wan .containerɛn .container-fluidakɔdin to ɛni brek pɔynt.

Si dɛn insay akshɔn ɛn kɔmpia dɛn na wi Grid ɛgzampul .

Difɔlt kɔntena

Wi difɔlt .containerklas na kɔntena we de ansa, we gɛt fiks-wid, we min se i de max-widthchenj na ɛni brek pɔynt.

<div class="container">
  <!-- Content here -->
</div>

Kɔntena dɛn we de ansa

Rispɔnsiv kɔntena dɛn de alaw yu fɔ spɛsifa wan klas we 100% waid te di spɛsifikɛd brekpɔynt rich, afta dat wi de aplay max-widths fɔ ɛni wan pan di ay brekpɔynt dɛn. Fɔ ɛgzampul, .container-smna 100% waid fɔ stat te di smbrek pɔynt rich, usay i go skel ɔp wit md, lg, xl, ɛn 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>

Kɔntena dɛn we gɛt wata

Yuz .container-fluidfɔ wan kɔntena we gɛt ful wit, we de span di wan ol wit na di viupɔt.

<div class="container-fluid">
  ...
</div>

Sass we bin de

As yu si ɔp, Bootstrap de jenarayz wan siriɔs kɔntena klas dɛn we dɛn dɔn prɛdifayn fɔ ɛp yu fɔ bil di layout dɛn we yu want. Yu kin kɔstɔmayt dɛn kɔntena klas dɛn ya we dɛn dɔn prɛdifayn bay we yu chenj di Sass map (we de na _variables.scss) we de gi dɛn pawa:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Apat frɔm we yu kɔstɔmayz di Sass, yu kin mek yu yon kɔntena dɛn bak wit wi Sass mixin.

// 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();
}

Fɔ no mɔ ɛn ɛgzampul dɛn bɔt aw fɔ chenj wi Sass map ɛn vɛriɔbul dɛn, duya luk na di Sass sɛkshɔn na di Grid dɔkyumentri .