Konteinerid

Kuidas nad töötavad

Konteinerid on Bootstrapi kõige elementaarsem paigutuselement ja need on vajalikud meie vaikevõrgusüsteemi kasutamisel . Konteinereid kasutatakse nende sees oleva sisu mahutamiseks, polsterdamiseks ja (mõnikord) tsentreerimiseks. Kuigi konteinereid saab pesastada, ei vaja enamik paigutusi pesastatud konteinerit.

Bootstrapil on kolm erinevat konteinerit:

• .container, mis määrab max-widthigale reageerivale murdepunktile a
• .container-fluid, mis on width: 100%kõigis murdepunktides
• .container-{breakpoint}, mis on width: 100%kuni määratud katkestuspunktini

Allolev tabel illustreerib iga konteineri max-widthvõrdlust originaaliga .containerja .container-fluidiga katkestuspunkti lõikes.

Vaadake neid töös ja võrrelge neid meie ruudustiku näites .

Vaikimisi konteiner

Meie vaikeklass .containeron tundlik fikseeritud laiusega konteiner, mis tähendab, et see max-widthmuutub igas katkestuspunktis.

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

Reageerivad konteinerid

Reageerivad konteinerid võimaldavad teil määrata 100% laiuse klassi kuni määratud katkestuspunktini, pärast mida rakendame max-widthiga kõrgema murdepunkti jaoks s-i. Näiteks .container-smon 100% lai, et alustada kuni smkatkestuspunktini, kus seda suurendatakse md, lg, xl, ja 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>

Vedeliku mahutid

Kasutage .container-fluidtäislaiuse konteineri jaoks, mis katab kogu vaateava laiuse.

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

Sass

Nagu ülal näidatud, loob Bootstrap rea eelmääratletud konteinerklasse, mis aitavad teil soovitud paigutusi luua. Saate kohandada neid eelmääratletud konteinerklasse, muutes neid pakkuvat Sassi kaarti (leidav ​​kohast _variables.scss):

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

Lisaks Sassi kohandamisele saate meie Sassi seguga luua ka oma konteinereid.

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

Lisateavet ja näiteid meie Sassi kaartide ja muutujate muutmise kohta leiate Gridi dokumentatsiooni Sassi jaotisest .