Minɛnw

U bɛ baara kɛ cogo min na

minɛnw ye layidu tacogo jɔnjɔn ye Bootstrap kɔnɔ wa u wajibiyalen don ni an ka grid system default ye . Minɛnw bɛ kɛ ka kɔnɔkow mara, ka u pad, ani (tuma dɔw la) u cɛmancɛ la. Hali ni minɛnw bɛ Se ka Kɛ 'kɔnɔ, layidu fanba tɛ 'kɔnɔna-minɛn de wajibiya.

Bootstrap bɛ na ni minɛn saba ye minnu tɛ kelen ye:

• .container, min bɛ a sigi max-widthjaabi kariyɔrɔ kelen-kelen bɛɛ la
• .container-fluid, min bɛ width: 100%kɛ kariyɔrɔ bɛɛ la
• .container-{breakpoint}, o ye width: 100%fo ka se kariyɔrɔ kofɔlen ma

Tablo min bɛ duguma, o bɛ a jira cogo min na minɛn kelen-kelen bɛɛ ta max-widthbɛ suma ni fɔlɔ ta ye .containerani ka .container-fluidtɛmɛn kariyɔrɔ kelen-kelen bɛɛ kan.

aw ye u ye wale la k' u suma ɲɔgɔn na an ka Grid misali la .

Default minɛn min bɛ kɛ

An ka .containerkalasi dafalen ye jaabi-minɛn ye, min bonya bɛ jɔ, o kɔrɔ ye ko a max-widthbɛ fɛn caman Changements (Yɛlɛma) kariyɔrɔ kelen-kelen bɛɛ la.

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

Minɛn minnu bɛ jaabi di

Jaabi-minɛnw b’a To i bɛ se ka kalasi dɔ Jira min bonya ye 100% ye fo ka Se kariyɔrɔ kofɔlen ma, o kɔfɛ an bɛ max-widths Kɛ kariyɔrɔ sanfɛla kelen-kelen bɛɛ la. Misali la, .container-sma bɛ 100% bonya ka daminɛ fo ka se smkariyɔrɔ ma, a bɛna sɛgɛsɛgɛli kɛ yɔrɔ min na ni md, lg, xl, ani 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>

Jilama minɛnw

Baara .container-fluidkɛ ni minɛn ye min bonya dafalen don, min bɛ jatebɔyɔrɔ bonya bɛɛ lajɛlen na.

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

Sass ye

I n’a fɔ a jiralen bɛ cogo min na san fɛ, Bootstrap bɛ minɛnw kalasi minnu ɲɛfɔlen don ka kɔn, olu labɛn walasa k’i dɛmɛ ka i b’a fɛ ka layidu minnu dilan. Aw bɛ se ka nin minɛn kalasi minnu ɲɛfɔlen don ka kɔn, aw bɛ olu ladilan ni Sass karti (min bɛ sɔrɔ _variables.scss) ladilan min bɛ fanga di u ma:

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

Ka fara Sass customize kan, aw bɛ se fana ka aw yɛrɛ ka minɛnw dilan ni an ka Sass mixin ye.

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

Walasa ka kunnafoni wɛrɛw sɔrɔ ani misaliw an ka Sass kartiw ni fɛn caman sɛmɛntiyacogo kan, aw bɛ Sass yɔrɔ lajɛ Grid sɛbɛnw kɔnɔ .