Contenitori

Come funzionano

I contenitori sono l'elemento di layout più semplice in Bootstrap e sono necessari quando si utilizza il nostro sistema di griglia predefinito . I contenitori vengono utilizzati per contenere, riempire e (a volte) centrare il contenuto al loro interno. Sebbene i contenitori possano essere nidificati, la maggior parte dei layout non richiede un contenitore nidificato.

Bootstrap viene fornito con tre diversi contenitori:

• .container, che imposta a max-widtha ogni punto di interruzione reattivo
• .container-{breakpoint}, che è width: 100%fino al punto di interruzione specificato
• .container-fluid, che è width: 100%a tutti i punti di interruzione

La tabella seguente illustra il max-widthconfronto tra ciascun contenitore e l'originale .containere .container-fluidin ogni punto di interruzione.

Guardali in azione e confrontali nel nostro esempio di griglia .

Contenitore predefinito

La nostra classe predefinita .containerè un contenitore reattivo a larghezza fissa, il che significa le sue max-widthmodifiche a ogni punto di interruzione.

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

Contenitori reattivi

I contenitori reattivi consentono di specificare una classe ampia al 100% fino al raggiungimento del punto di interruzione specificato, dopodiché applichiamo max-widths per ciascuno dei punti di interruzione più alti. Ad esempio, .container-smè 100% di larghezza per iniziare fino al smraggiungimento del punto di interruzione, dove verrà scalato con md, lg, xle 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>

Contenitori per liquidi

Utilizzare .container-fluidper un contenitore a larghezza intera, che copre l'intera larghezza della finestra.

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

Sass

Come mostrato sopra, Bootstrap genera una serie di classi contenitore predefinite per aiutarti a creare i layout che desideri. Puoi personalizzare queste classi contenitore predefinite modificando la mappa Sass (che si trova in _variables.scss) che le alimenta:

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

Oltre a personalizzare il Sass, puoi anche creare i tuoi contenitori con il nostro 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 ulteriori informazioni ed esempi su come modificare le nostre mappe e variabili Sass, fare riferimento alla sezione Sass della documentazione Grid .