Přejít na hlavní obsah Přejít na navigaci v dokumentech
Check
in English

Kontejnery

Kontejnery jsou základním stavebním kamenem Bootstrapu, který obsahuje, vyplňuje a zarovnává váš obsah v rámci daného zařízení nebo výřezu.

Jak fungují

Kontejnery jsou nejzákladnějším prvkem rozvržení v Bootstrapu a jsou vyžadovány při použití našeho výchozího systému mřížky . Kontejnery se používají k uložení, vyložení a (někdy) vystředění obsahu v nich. I když lze kontejnery vnořit, většina rozvržení vnořený kontejner nevyžaduje.

Bootstrap se dodává se třemi různými kontejnery:

  • .container, který nastavuje a max-widthu každého citlivého bodu přerušení
  • .container-{breakpoint}, což je width: 100%až do zadaného bodu přerušení
  • .container-fluid, což je width: 100%ve všech bodech zlomu

Níže uvedená tabulka ukazuje max-widthsrovnání jednotlivých kontejnerů s originálem .containera .container-fluidnapříč jednotlivými body přerušení.

Prohlédněte si je v akci a porovnejte je v našem příkladu mřížky .

Extra malý
<576 pixelů
Malý
≥576 pixelů
Střední
≥768 pixelů
Velký
≥992 pixelů
X-velký
≥1200 pixelů
XX-velký
≥1400 pixelů
.container 100% 540 pixelů 720 pixelů 960 pixelů 1140 pixelů 1320 pixelů
.container-sm 100% 540 pixelů 720 pixelů 960 pixelů 1140 pixelů 1320 pixelů
.container-md 100% 100% 720 pixelů 960 pixelů 1140 pixelů 1320 pixelů
.container-lg 100% 100% 100% 960 pixelů 1140 pixelů 1320 pixelů
.container-xl 100% 100% 100% 100% 1140 pixelů 1320 pixelů
.container-xxl 100% 100% 100% 100% 100% 1320 pixelů
.container-fluid 100% 100% 100% 100% 100% 100%

Výchozí kontejner

Naše výchozí .containertřída je responzivní kontejner s pevnou šířkou, což znamená, že max-widthse mění v každém bodě přerušení.

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

Responzivní kontejnery

Responzivní kontejnery umožňují zadat třídu, která je 100% široká, dokud není dosaženo zadaného bodu přerušení, poté použijeme max-widths pro každý z vyšších bodů přerušení. Například .container-smje 100% široká pro začátek, dokud smnení dosaženo bodu přerušení, kde se zvětší pomocí 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žijte .container-fluidpro kontejner plné šířky, pokrývající celou šířku výřezu.

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

Sass

Jak je uvedeno výše, Bootstrap generuje řadu předdefinovaných tříd kontejnerů, které vám pomohou vytvořit rozvržení, která si přejete. Tyto předdefinované třídy kontejnerů můžete přizpůsobit úpravou mapy Sass (najdete v _variables.scss), která je pohání:

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

Kromě přizpůsobení Sass si můžete také vytvořit své vlastní nádoby s naším Sass mixinem.

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

Další informace a příklady, jak upravit naše mapy a proměnné Sass, naleznete v sekci Sass v dokumentaci Grid .