Ba récipients

Ndenge oyo basalaka

Ba conteneurs ezali élément ya layout ya base mingi na Bootstrap mpe esengeli tango ya kosalela système na biso ya grille par défaut . Ba récipients esalelamaka mpo na kokanga, ko pad, mpe (ntango mosusu) ko centrer makambo oyo ezali na kati na yango. Atako ba conteneurs ekoki kozala na kati, mingi ya ba layouts esengaka te conteneur oyo ekangami.

Bootstrap eza na ba récipients misato ekeseni:

• .container, oyo etyaka a max-widthna esika mokomoko ya kobuka oyo ezali koyanola
• .container-{breakpoint}, oyo ezali width: 100%tii na esika oyo emonisami
• .container-fluid, oyo ezali width: 100%na bisika nyonso ya kobukana

Tableau oyo ezali awa na se ezali kolakisa ndenge nini conteneur moko na moko max-widthekokani na oyo ya ebandeli .containermpe .container-fluidna kati ya esika moko na moko ya kobukana.

Tala bango na misala mpe kokanisá bango na ndakisa na biso ya Grille .

Conteneur ya défaut

Classe na biso ya défaut .containerezali réponse, conteneur ya largeur fixe, elingi koloba ba max-widthchangements na yango na point de rupture moko na moko.

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

Ba récipients oyo ezo répondre

Ba conteneurs réponses epesaka yo nzela ya ko préciser classe oyo ezali na largeur ya 100% tii tango point de rupture oyo elakisami ekokoma, sima na yango tosalelaka max-widths pona moko na moko ya ba points de rupture ya likolo. Ndakisa, .container-smezali 100% ya bonene mpo na kobanda kino smesika ya bopanzani ekokoma, esika ekomata na md, lg, xl, mpe 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>

Ba récipients ya mayi

Salelá .container-fluidmpo na eloko oyo ezali na bonene mobimba, oyo ezali na bonene mobimba ya esika ya kotala.

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

Sass oyo azali

Ndenge emonisami likolo, Bootstrap ebimisaka molɔngɔ́ ya bakelasi ya ba conteneurs oyo esili kolimbolama liboso mpo na kosalisa yo otonga ba layouts oyo olingi. Okoki kobongisa ba classes oyo ya ba conteneurs oyo esili ko définir na kobongola carte ya Sass (ezwami na _variables.scss) oyo epesaka bango nguya:

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

En plus ya ko personnaliser Sass, okoki pe kosala ba conteneurs na yo moko na mixin na biso ya 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();
}

Mpo na koyeba makambo mingi mpe bandakisa ya ndenge ya kobongisa ba cartes mpe ba variables na biso ya Sass, tala eteni ya Sass ya mikanda ya Grid .