Contenidors

Com funcionen

Els contenidors són l'element de disseny més bàsic a Bootstrap i són necessaris quan s'utilitza el nostre sistema de graella predeterminat . Els contenidors s'utilitzen per contenir, estampar i (de vegades) centrar el contingut dins d'ells. Tot i que els contenidors es poden imbricar, la majoria de dissenys no requereixen un contenidor imbricat.

Bootstrap inclou tres contenidors diferents:

• .container, que estableix un max-widtha cada punt d'interrupció de resposta
• .container-{breakpoint}, que és width: 100%fins al punt d'interrupció especificat
• .container-fluid, que es troba width: 100%en tots els punts d'interrupció

La taula següent il·lustra com es max-widthcompara cada contenidor amb l'original .containeri .container-fluiden cada punt d'interrupció.

Vegeu-los en acció i compareu-los al nostre exemple de quadrícula .

Contenidor per defecte

La nostra classe per defecte .containerés un contenidor sensible i d'amplada fixa, és a dir, els seus max-widthcanvis a cada punt d'interrupció.

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

Contenidors sensibles

Els contenidors responsius us permeten especificar una classe que tingui un 100% d'amplada fins que s'arribi al punt d'interrupció especificat, després del qual apliquem max-widths per a cadascun dels punts d'interrupció més alts. Per exemple, .container-smté un 100% d'ample per començar fins smque s'arriba al punt d'interrupció, on augmentarà amb 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>

Envasos de fluids

Utilitzeu .container-fluid-lo per a un contenidor d'amplada completa, que abasti tota l'amplada de la finestra gràfica.

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

Sass

Com es mostra més amunt, Bootstrap genera una sèrie de classes de contenidors predefinides per ajudar-vos a crear els dissenys que desitgeu. Podeu personalitzar aquestes classes de contenidors predefinides modificant el mapa Sass (que es troba a _variables.scss) que les alimenta:

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

A més de personalitzar el Sass, també podeu crear els vostres propis contenidors amb el nostre mixin Sass.

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

Per obtenir més informació i exemples sobre com modificar els nostres mapes i variables Sass, consulteu la secció Sass de la documentació de Grid .