Contenitori
I contenitori sono un elemento fondamentale di Bootstrap che contengono, riempiono e allineano i tuoi contenuti all'interno di un determinato dispositivo o viewport.
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 amax-width
a ogni punto di interruzione reattivo.container-fluid
, che èwidth: 100%
a tutti i punti di interruzione.container-{breakpoint}
, che èwidth: 100%
fino al punto di interruzione specificato
La tabella seguente illustra il max-width
confronto tra ciascun contenitore e l'originale .container
e .container-fluid
in ogni punto di interruzione.
Guardali in azione e confrontali nel nostro esempio di griglia .
Extra piccolo <576px |
Piccolo ≥576px |
Medio ≥768px |
Grande ≥992px |
X-Large ≥1200px |
XX-Grande ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Contenitore predefinito
La nostra classe predefinita .container
è un contenitore reattivo a larghezza fissa, il che significa le sue max-width
modifiche 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-width
s per ciascuno dei punti di interruzione più alti. Ad esempio, .container-sm
è 100% di larghezza per iniziare fino al sm
raggiungimento del punto di interruzione, dove verrà scalato con md
, lg
, xl
e 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-fluid
per 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 .