Ebintu ebiteekebwamu ebintu

Engeri gye zikolamu

Containers ze kintu ekisinga obukulu eky'ensengeka mu Bootstrap era zeetaagibwa nga okozesa enkola yaffe eya grid eya bulijjo . Ebitereke bikozesebwa okuteekebwamu, okupa, n’okussa (oluusi) wakati ebirimu munda mu byo. Wadde nga ebitereke bisobola okuteekebwa mu kisu, ensengeka ezisinga tezeetaaga kibya kya kiyumba.

Bootstrap ejja n’ebintu bisatu eby’enjawulo:

• .container, eteeka a max-widthku buli breakpoint eddamu
• .container-{breakpoint}, nga kino kibeera width: 100%okutuusa ku kifo ekiragiddwa eky’okumenyawo
• .container-fluid, nga kino kiri width: 100%ku bifo byonna eby’okumenya

Omulongooti wansi gulaga engeri buli container's max-widthgyegerageranya ku original .containerera .container-fluidokubuna buli breakpoint.

Zirabe nga zikola era ozigeraageranye mu kyokulabirako kyaffe ekya Grid .

Ekintu ekisookerwako

Ekibiina kyaffe ekisookerwako .containerkye kiddamu, ekitereka eky’obugazi obutakyukakyuka, ekitegeeza max-widthenkyukakyuka zaakyo ku buli kifo eky’okumenya.

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

Ebitereke ebiddamu

Ebitereke ebiddamu bikusobozesa okulaga kiraasi egazi 100% okutuusa ng’ekifo eky’okumenya ekiragiddwa kituuse, oluvannyuma ne tukozesa max-widths ku buli kimu ku bifo eby’okumenya eby’oku ntikko. Okugeza, .container-smis 100% wide okutandika okutuusa nga smbreakpoint etuuse, gyejja okulinnya ne 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>

Ebintu ebiteekebwamu amazzi

Kozesa .container-fluidku kibya eky'obugazi obujjuvu, ekibunye obugazi bwonna obw'ekifo eky'okulaba.

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

Sass nga bwe kiri

Nga bwe kiragibwa waggulu, Bootstrap ekola omuddirirwa gwa kiraasi za konteyina ezitegekeddwa edda okukuyamba okuzimba ensengeka z’oyagala. Oyinza okulongoosa kiraasi zino ez'ebintu ebiteekeddwateekeddwa edda ng'okyusa maapu ya Sass (esangibwa mu _variables.scss) eziwa amaanyi:

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

Ng’oggyeeko okulongoosa Sass, osobola n’okukola ebitereke byo nga okozesa mixin yaffe eya Sass.

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

Okumanya ebisingawo n’ebyokulabirako ku ngeri y’okukyusaamu maapu zaffe eza Sass n’enkyukakyuka, laba ekitundu kya Sass eky’ebiwandiiko bya Grid .