Kontejnery

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-fluid, což je width: 100%ve všech bodech zlomu
• .container-{breakpoint}, což je width: 100%až do zadaného bodu přerušení

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 .

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 .