Kontejneri

Kako rade

Kontejneri su najosnovniji element izgleda u Bootstrapu i potrebni su kada se koristi naš zadani grid sustav . Spremnici se koriste za držanje, podmetanje i (ponekad) centriranje sadržaja unutar njih. Iako se spremnici mogu ugniježditi, većina izgleda ne zahtijeva ugniježđeni spremnik.

Bootstrap dolazi s tri različita spremnika:

• .container, koji postavlja a max-widthna svakoj točki prijelaza
• .container-fluid, koji je width: 100%na svim prijelomnim točkama
• .container-{breakpoint}, što je width: 100%do navedene prijelomne točke

Donja tablica ilustrira kako se svaki spremnik max-widthuspoređuje s izvornikom .containeri .container-fluidpreko svake prijelomne točke.

Pogledajte ih na djelu i usporedite ih u našem primjeru mreže .

Zadani spremnik

Naša zadana .containerklasa je responzivni spremnik fiksne širine, što znači da se max-widthmijenja na svakoj prekidnoj točki.

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

Responzivni spremnici

Responzivni spremnici omogućuju vam da navedete klasu koja je 100% široka dok se ne dosegne navedena prijelomna točka, nakon čega primjenjujemo max-widths za svaku od viših prijelomnih točaka. Na primjer, .container-smširina je 100% za početak dok se smne dosegne prijelomna točka, gdje će se povećati s md, lg, xli 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>

Spremnici za tekućinu

Koristite .container-fluidza spremnik pune širine, koji obuhvaća cijelu širinu prozora.

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

Sass

Kao što je gore prikazano, Bootstrap generira niz unaprijed definiranih klasa spremnika kako bi vam pomogao da izgradite izglede koje želite. Možete prilagoditi ove unaprijed definirane klase spremnika modificiranjem Sass karte (pronađene u _variables.scss) koja ih pokreće:

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

Osim prilagodbe Sass-a, također možete izraditi vlastite spremnike s našim Sass mixinom.

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

Za više informacija i primjere o tome kako modificirati naše Sass mape i varijable, pogledajte odjeljak Sass u Grid dokumentaciji .