Svetuka kune chikuru content Svetuka kuenda kudocs navigation
in English

Containers

Containers chinhu chakakosha chekuvaka cheBootstrap chine, pad, uye rongedza zvirimo mukati mechinhu chakapihwa mudziyo kana yekutarisa.

Mashandiro avanoita

Containers ndiyo inonyanya kukosha dhizaini muBootstrap uye inodiwa kana uchishandisa yedu default grid system . Midziyo inoshandiswa kuve ne, pad, uye (dzimwe nguva) pakati pezviri mukati mazvo. Nepo midziyo inogona kuvharirwa, marongerwo mazhinji haadi chigadziko chine madendere.

Bootstrap inouya nemidziyo mitatu yakasiyana:

  • .container, iyo inoisa max-widthpane imwe neimwe inopindura breakpoint
  • .container-fluid, iyo iri width: 100%panguva dzese dzekutyora
  • .container-{breakpoint}, inova width: 100%kusvika pane yakatarwa breakpoint

Tafura iri pazasi inoratidza kuti mudziyo wega wega max-widthunofananidzwa sei neyekutanga .containeruye .container-fluidpadanho rega rega rekutyora.

Vaone mukuita uye vaenzanise muGridhi yedu muenzaniso .

Yakawedzera diki
<576px
Diki ≥576px
Pakati
nepakati ≥768px
Huru ≥992px
X-Large
≥1200px
XX-
Huru ≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Default mudziyo

Yedu .containeryakasarudzika kirasi inopindura, yakagadziriswa-yakafara mudziyo, zvichireva max-widthshanduko dzayo pane imwe neimwe breakpoint.

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

Midziyo inopindura

Midziyo inopindura inokutendera kuti utaure kirasi iyo iri 100% yakafara kusvika iyo yakatarwa breakpoint yasvika, mushure mezvo isu tinoisa max-widths kune yega yega yepamusoro breakpoint. Semuyenzaniso, .container-smi100% yakafara kutanga kusvika smpakavhurika yasvika, painozokwira ne md, lg, xl, uye 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>

Fluid containers

Shandisa .container-fluidkune chigadziko chakazara chakafara, chinotenderera hupamhi hwese hwekutarisa.

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

Sass

Sezvaratidzwa pamusoro, Bootstrap inogadzira akateedzana akatemerwa emidziyo makirasi kuti akubatsire iwe kuvaka marongero aunoda. Iwe unogona kugadzirisa aya akafanotsanangurwa emidziyo makirasi nekugadzirisa iyo Sass mepu (inowanikwa mu _variables.scss) inovapa simba:

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

Pamusoro pekugadzirisa iyo Sass, iwe unogona zvakare kugadzira yako midziyo ine yedu Sass musanganiswa.

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

Kuti uwane rumwe ruzivo nemienzaniso yekugadzirisa mamepu edu eSass uye zvinosiyana, ndapota tarisa kune chikamu cheSass cheGridhi zvinyorwa .