Kontajnery

Ako fungujú

Kontajnery sú najzákladnejším prvkom rozloženia v Bootstrape a sú potrebné pri použití nášho predvoleného mriežkového systému . Kontajnery sa používajú na uloženie, vyplnenie a (niekedy) vycentrovanie obsahu v nich. Hoci kontajnery môžu byť vnorené, väčšina rozložení nevyžaduje vnorený kontajner.

Bootstrap sa dodáva s tromi rôznymi kontajnermi:

• .container, ktorý nastavuje a max-widthpri každom responzívnom bode prerušenia
• .container-{breakpoint}, čo je width: 100%až do zadaného bodu zlomu
• .container-fluid, ktorá je width: 100%vo všetkých bodoch zlomu

Nasledujúca tabuľka zobrazuje porovnanie jednotlivých kontajnerov max-widths originálom .containera .container-fluidnaprieč jednotlivými bodmi prerušenia.

Pozrite si ich v akcii a porovnajte ich v našom príklade mriežky .

Predvolený kontajner

Naša predvolená .containertrieda je responzívny kontajner s pevnou šírkou, čo znamená, že sa max-widthmení pri každom bode prerušenia.

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

Responzívne kontajnery

Responzívne kontajnery vám umožňujú určiť triedu, ktorá je 100 % široká, kým sa nedosiahne zadaný bod prerušenia, potom použijeme max-widths pre každý z vyšších bodov prerušenia. Napríklad .container-smmá 100 % šírku na začiatok, kým smsa nedosiahne bod prerušenia, kde sa zväčší pomocou md, lg, xla 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>

Nádoby na tekutiny

Použite .container-fluidpre kontajner plnej šírky, ktorý pokrýva celú šírku výrezu.

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

Sass

Ako je uvedené vyššie, Bootstrap generuje sériu preddefinovaných tried kontajnerov, ktoré vám pomôžu vytvoriť rozloženia, ktoré chcete. Tieto preddefinované triedy kontajnerov môžete prispôsobiť úpravou mapy Sass (nachádza sa v _variables.scss), ktorá ich poháňa:

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

Okrem prispôsobenia Sass si môžete tiež vytvoriť svoje vlastné nádoby pomocou nášho Sass mixinu.

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

Ďalšie informácie a príklady, ako upraviť naše mapy a premenné Sass, nájdete v sekcii Sass v dokumentácii Grid .