Source

Sistema a griglia

Usa la nostra potente griglia flexbox mobile-first per creare layout di tutte le forme e dimensioni grazie a un sistema a dodici colonne, cinque livelli reattivi predefiniti, variabili Sass e mixin e dozzine di classi predefinite.

Come funziona

Il sistema a griglia di Bootstrap utilizza una serie di contenitori, righe e colonne per il layout e l'allineamento del contenuto. È costruito con flexbox ed è completamente reattivo. Di seguito è riportato un esempio e uno sguardo approfondito su come la griglia si unisce.

Nuovo o non conosci flexbox? Leggi questa guida flexbox CSS Tricks per informazioni su background, terminologia, linee guida e frammenti di codice.

Una delle tre colonne

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

L'esempio precedente crea tre colonne di uguale larghezza su dispositivi piccoli, medi, grandi ed extra large utilizzando le nostre classi di griglia predefinite. Tali colonne sono centrate nella pagina con il genitore .container.

Scomponendolo, ecco come funziona:

I contenitori forniscono un mezzo per centrare e riempire orizzontalmente i contenuti del tuo sito. Utilizzare .containerper una larghezza pixel reattiva o .container-fluidper width: 100%tutte le dimensioni del viewport e del dispositivo.
Le righe sono wrapper per le colonne. Ogni colonna ha un'orizzontale padding(chiamata grondaia) per controllare lo spazio tra di loro. Questo paddingviene poi contrastato sulle righe con margini negativi. In questo modo, tutto il contenuto delle colonne è allineato visivamente sul lato sinistro.
In un layout a griglia, il contenuto deve essere posizionato all'interno di colonne e solo le colonne possono essere figli immediati di righe.
Grazie a flexbox, le colonne della griglia senza un valore specificato widthverranno automaticamente posizionate come colonne di uguale larghezza. Ad esempio, quattro istanze di .col-smsaranno automaticamente larghe il 25% dal punto di interruzione piccolo in su. Vedi la sezione delle colonne con layout automatico per altri esempi.
Le classi di colonne indicano il numero di colonne che desideri utilizzare tra le possibili 12 per riga. Quindi, se vuoi tre colonne di uguale larghezza, puoi usare .col-4.
Le colonne widthsono impostate in percentuale, quindi sono sempre fluide e dimensionate rispetto all'elemento padre.
Le colonne hanno l'orizzontale paddingper creare le grondaie tra le singole colonne, tuttavia, puoi rimuovere le marginrighe e le paddingcolonne con .no-guttersil file .row.
Per rendere la griglia reattiva, ci sono cinque punti di interruzione della griglia, uno per ogni punto di interruzione reattivo : tutti i punti di interruzione (extra piccolo), piccolo, medio, grande ed extra grande.
I punti di interruzione della griglia si basano su query multimediali di larghezza minima, il che significa che si applicano a quell'unico punto di interruzione ea tutti quelli al di sopra (ad esempio, .col-sm-4si applica a dispositivi piccoli, medi, grandi ed extra grandi, ma non al primo punto di xsinterruzione).
Puoi usare classi di griglia predefinite (come .col-4) o mixin Sass per più markup semantico.

Siate consapevoli delle limitazioni e dei bug di flexbox , come l' impossibilità di utilizzare alcuni elementi HTML come contenitori flessibili .

Opzioni griglia

Mentre Bootstrap usa ems o rems per definire la maggior parte delle dimensioni, pxs sono usati per i punti di interruzione della griglia e le larghezze dei contenitori. Questo perché la larghezza della finestra è in pixel e non cambia con la dimensione del carattere .

Scopri come funzionano gli aspetti del sistema di griglia Bootstrap su più dispositivi con una pratica tabella.

	Extra piccolo <576px	Piccolo ≥576px	Medio ≥768px	Grande ≥992px	Extra grande ≥1200px
Larghezza massima del contenitore	Nessuno (automatico)	540px	720px	960px	1140px
Prefisso di classe	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# di colonne	12
Larghezza della grondaia	30px (15px su ciascun lato di una colonna)
Nidificabile	sì
Ordinamento delle colonne	sì

Colonne con layout automatico

Utilizza classi di colonne specifiche del punto di interruzione per ridimensionare facilmente le colonne senza una classe numerata esplicita come .col-sm-6.

Uguale larghezza

Ad esempio, ecco due layout di griglia che si applicano a ogni dispositivo e finestra, da xsa xl. Aggiungi un numero qualsiasi di classi senza unità per ogni punto di interruzione di cui hai bisogno e ogni colonna avrà la stessa larghezza.

1 di 2

2 di 2

1 di 3

2 di 3

3 di 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Le colonne di uguale larghezza possono essere suddivise in più righe, ma c'era un bug di Safari flexbox che ne impediva il funzionamento senza un esplicito flex-basiso border. Esistono soluzioni alternative per le versioni precedenti del browser, ma non dovrebbero essere necessarie se sei aggiornato.

Colonna

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Impostazione della larghezza di una colonna

Il layout automatico per le colonne della griglia flexbox significa anche che puoi impostare la larghezza di una colonna e fare in modo che le colonne di pari livello si ridimensionino automaticamente attorno ad essa. È possibile utilizzare classi di griglia predefinite (come mostrato di seguito), mixin di griglia o larghezze inline. Nota che le altre colonne verranno ridimensionate indipendentemente dalla larghezza della colonna centrale.

1 di 3

2 di 3 (più largo)

3 di 3

1 di 3

2 di 3 (più largo)

3 di 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contenuto a larghezza variabile

Usa col-{breakpoint}-autole classi per ridimensionare le colonne in base alla larghezza naturale del loro contenuto.

1 di 3

Contenuto a larghezza variabile

3 di 3

1 di 3

Contenuto a larghezza variabile

3 di 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Multifila di uguale larghezza

Crea colonne di uguale larghezza che si estendono su più righe inserendo un .w-100punto in cui desideri che le colonne si interrompano su una nuova riga. Rendi le pause reattive combinandole .w-100con alcune utilità di visualizzazione reattive .

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Classi reattive

La griglia di Bootstrap include cinque livelli di classi predefinite per la creazione di layout reattivi complessi. Personalizza le dimensioni delle tue colonne su dispositivi extra piccoli, piccoli, medi, grandi o extra grandi come meglio credi.

Tutti i punti di interruzione

Per le griglie uguali dal dispositivo più piccolo al più grande, utilizzare le classi .cole . .col-*Specificare una classe numerata quando si necessita di una colonna di dimensioni particolari; in caso contrario, sentiti libero di attenersi a .col.

col

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Impilato in orizzontale

Utilizzando un unico insieme di .col-sm-*classi, puoi creare un sistema a griglia di base che inizia impilato e diventa orizzontale al piccolo punto di interruzione ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mescolare e abbinare

Non vuoi che le tue colonne vengano semplicemente impilate in alcuni livelli della griglia? Usa una combinazione di classi diverse per ogni livello, se necessario. Vedi l'esempio qui sotto per un'idea migliore di come funziona.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Allineamento

Utilizzare le utilità di allineamento flexbox per allineare le colonne verticalmente e orizzontalmente.

Allineamento verticale

Una delle tre colonne

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Una delle tre colonne

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Allineamento orizzontale

Una delle due colonne

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Niente grondaie

Le grondaie tra le colonne nelle nostre classi di griglia predefinite possono essere rimosse con .no-gutters. Questo rimuove le margins negative .rowe l'orizzontale paddingda tutte le colonne figlie immediate.

Ecco il codice sorgente per creare questi stili. Si noti che le sostituzioni delle colonne hanno come ambito solo le prime colonne figlie e vengono scelte come target tramite il selettore di attributi . Sebbene ciò generi un selettore più specifico, il riempimento delle colonne può ancora essere ulteriormente personalizzato con le utilità di spaziatura .

Hai bisogno di un design edge-to-edge? Rilascia il genitore .containero .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

In pratica, ecco come appare. Tieni presente che puoi continuare a usarlo con tutte le altre classi di griglia predefinite (incluse le larghezze delle colonne, i livelli reattivi, i riordini e altro).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Avvolgimento delle colonne

Se più di 12 colonne sono posizionate all'interno di una singola riga, ogni gruppo di colonne extra verrà, come un'unica unità, a capo su una nuova riga.

.col-9

.col-4
Poiché 9 + 4 = 13 > 12, questo div a 4 colonne viene avvolto su una nuova riga come un'unità contigua.

.col-6
Le colonne successive continuano lungo la nuova riga.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Interruzioni di colonna

Rompere le colonne in una nuova riga in flexbox richiede un piccolo trucco: aggiungi un elemento con width: 100%dove vuoi avvolgere le tue colonne in una nuova riga. Normalmente ciò si ottiene con più .rows, ma non tutti i metodi di implementazione possono tenerne conto.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Puoi anche applicare questa interruzione a punti di interruzione specifici con le nostre utilità di visualizzazione reattiva .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Riordino

Ordina le classi

Usa .order-le classi per controllare l' ordine visivo dei tuoi contenuti. Queste classi sono reattive, quindi puoi impostare il orderpunto di interruzione per (ad esempio, .order-1.order-md-2). Include il supporto per 1tutti 12e cinque i livelli della griglia.

Primo, ma non ordinato

Secondo, ma ultimo

Terzo, ma primo

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Esistono anche classi reattive .order-firste che modificano l' elemento di un elemento applicando e ( ), rispettivamente. Queste classi possono anche essere mescolate con le classi numerate secondo necessità..order-lastorderorder: -1order: 13order: $columns + 1.order-*

Primo, ma ultimo

Secondo, ma non ordinato

Terzo, ma primo

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Colonne di compensazione

Puoi compensare le colonne della griglia in due modi: le nostre .offset-classi di griglia reattive e le nostre utilità di margine . Le classi della griglia sono dimensionate per corrispondere alle colonne, mentre i margini sono più utili per layout rapidi in cui la larghezza dell'offset è variabile.

Classi offset

Sposta le colonne a destra usando le .offset-md-*classi. Queste classi aumentano il margine sinistro di una colonna di *colonne. Ad esempio, .offset-md-4si sposta .col-md-4su quattro colonne.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Oltre alla cancellazione delle colonne nei punti di interruzione reattivi, potrebbe essere necessario reimpostare gli offset. Guardalo in azione nell'esempio della griglia .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Utilità di margine

Con il passaggio a flexbox nella v4, puoi utilizzare utilità .mr-autodi margine come forzare le colonne di pari livello l'una dall'altra.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Nidificazione

Per annidare i tuoi contenuti con la griglia predefinita, aggiungi un nuovo .rowe un insieme di colonne all'interno di una colonna .col-sm-*esistente . .col-sm-*Le righe nidificate devono includere un set di colonne che si sommano fino a 12 o meno (non è necessario utilizzare tutte le 12 colonne disponibili).

Livello 1: .col-sm-9

Livello 2: .col-8 .col-sm-6

Livello 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Miscele di Sass

Quando si utilizzano i file Sass di origine di Bootstrap, è possibile utilizzare variabili e mixin Sass per creare layout di pagina personalizzati, semantici e reattivi. Le nostre classi di griglia predefinite utilizzano queste stesse variabili e mixin per fornire un'intera suite di classi pronte all'uso per layout veloci e reattivi.

Variabili

Le variabili e le mappe determinano il numero di colonne, la larghezza della grondaia e il punto di media query in cui iniziare le colonne mobili. Li usiamo per generare le classi di griglia predefinite documentate sopra, così come per i mixin personalizzati elencati di seguito.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

Miscele

I mixin vengono utilizzati insieme alle variabili della griglia per generare CSS semantici per le singole colonne della griglia.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Esempio di utilizzo

Puoi modificare le variabili in base ai tuoi valori personalizzati o semplicemente utilizzare i mixin con i loro valori predefiniti. Ecco un esempio di utilizzo delle impostazioni predefinite per creare un layout a due colonne con uno spazio vuoto tra.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Contenuto principale

Contenuto secondario

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalizzazione della griglia

Utilizzando le nostre variabili e mappe Sass della griglia integrate, è possibile personalizzare completamente le classi di griglia predefinite. Modifica il numero di livelli, le dimensioni della query multimediale e le larghezze del contenitore, quindi ricompila.

Colonne e grondaie

Il numero delle colonne della griglia può essere modificato tramite le variabili Sass. $grid-columnsviene utilizzato per generare le larghezze (in percentuale) di ogni singola colonna mentre $grid-gutter-widthimposta la larghezza per le grondaie delle colonne.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Livelli di griglia

Andando oltre le colonne stesse, puoi anche personalizzare il numero di livelli della griglia. Se volessi solo quattro livelli di griglia, aggiorneresti $grid-breakpointse $container-max-widthsa qualcosa del genere:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Quando apporti modifiche alle variabili o mappe Sass, dovrai salvare le modifiche e ricompilare. In questo modo verrà prodotto un nuovissimo set di classi di griglia predefinite per larghezze, offset e ordinamento delle colonne. Anche le utilità di visibilità reattive verranno aggiornate per utilizzare i punti di interruzione personalizzati. Assicurati di impostare i valori della griglia in px(non rem, emo %).