Dagiti Pagkargaan

No kasano ti panagtrabahoda

Dagiti pagkargaan ket isu dagiti kangrunaan nga elemento ti layout iti Bootstrap ken kasapulan no agus-usar ti default a sistematayo ti grid . Dagiti pagkargaan ket mausar a manglaon, mangpadpad, ken (no dadduma) mangisentro ti linaon iti uneg dagitoy. Bayat a dagiti pagkargaan ket mabalin a mai-nest, kaaduan kadagiti layout ket saan a kasapulan ti naisanglad a pagkargaan.

Ti Bootstrap ket addaan iti tallo a nagduduma a container:

• .container, a mangikeddeng ti a max-widthiti tunggal sumungbat a breakpoint
• .container-{breakpoint}, nga width: 100%agingga iti naikeddeng a breakpoint
• .container-fluid, nga adda width: 100%iti amin a breakpoint

Ti lamisaan iti baba ket mangiladawan no kasano a tunggal container's max-widthket maidilig iti orihinal .containerken .container-fluiditi ballasiw ti tunggal breakpoint.

Kitaen dagitoy nga agtigtignay ken idilig dagitoy iti pagarigantayo iti Grid .

Default nga pagkargaan

Ti default .containera klasemi ket maysa a makasungbat, naikeddeng-kalawa a pagkargaan, kayatna a sawen dagiti max-widthpanagbalbaliwna iti tunggal maysa a breakpoint.

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

Dagiti makasungbat a pagkargaan

Dagiti sumungbat a pagkargaan ket mangipalubos kenka a mangibaga ti maysa a klase a 100% ti kalawana aginggana ti naikeddeng a puntos ti panagburak ket madanon, kalpasanna ket iyaplikarmi max-widthti s para iti tunggal maysa kadagiti nangatngato a puntos ti panagburak. Kas pagarigan, .container-smket 100% ti kalawana tapno mangrugi aginggana ti smbreakpoint ket madanon, a sadiay ket ag-scale up babaen ti md, lg, xl, ken 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>

Dagiti pagkargaan iti pluido

Usaren .container-fluidpara iti naan-anay a kalawa a pagkargaan, a mangsaklaw ti sibubukel a kalawa ti viewport.

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

Sass nga

Kas naipakita iti ngato, ti Bootstrap ket mangpataud ti serye dagiti nasakbay a naikeddeng a klase ti pagkargaan tapno matulongannaka a mangbangon kadagiti layout a tarigagayam. Mabalinmo nga ipasadaan dagitoy a nasakbay a naikeddeng a klase ti pagkargaan babaen ti panangbalbaliw ti mapa ti Sass (masarakan iti _variables.scss) a mangpabileg kadagitoy:

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

Malaksid iti panangpasayaat iti Sass, mabalinmo pay ti agaramid kadagiti bukodmo a container babaen ti Sass mixin-mi.

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

Para iti ad-adu nga impormasion ken dagiti pagarigan no kasano a baliwan dagiti mapa ken variablemi ti Sass, pangngaasi a kitaen ti benneg ti Sass ti dokumentasion ti Grid .