Esempi di griglia Bootstrap

Layout di griglia di base per familiarizzare con la costruzione all'interno del sistema di griglia Bootstrap.

Tre colonne uguali

Ottieni tre colonne di uguale larghezza a partire dai desktop e scalabili su desktop di grandi dimensioni . Su dispositivi mobili, tablet e versioni precedenti, le colonne verranno impilate automaticamente.

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

Tre colonne disuguali

Ottieni tre colonne a partire dai desktop e scalando su desktop di grandi dimensioni di varie larghezze. Ricorda, le colonne della griglia dovrebbero sommare fino a dodici per un singolo blocco orizzontale. Più di questo, e le colonne iniziano a impilarsi indipendentemente dal viewport.

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

Due colonne

Ottieni due colonne a partire dai desktop e scalabile su desktop di grandi dimensioni .

.col-md-8
.col-md-4

Larghezza intera, colonna singola

Non sono necessarie classi di griglia per elementi a larghezza intera.

Due colonne con due colonne nidificate

Secondo la documentazione, l'annidamento è semplice: basta inserire una riga di colonne all'interno di una colonna esistente. Questo ti dà due colonne che iniziano su desktop e scalano a desktop di grandi dimensioni , con altre due (larghezze uguali) all'interno della colonna più grande.

A dimensioni di dispositivi mobili, tablet e versioni precedenti, queste colonne e le relative colonne nidificate verranno impilate.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Misti: mobile e desktop

Il sistema a griglia Bootstrap 3 ha quattro livelli di classi: xs (telefoni), sm (tablet), md (desktop) e lg (desktop più grandi). Puoi utilizzare quasi tutte le combinazioni di queste classi per creare layout più dinamici e flessibili.

Ogni livello di classi aumenta, il che significa che se prevedi di impostare le stesse larghezze per xs e sm, devi solo specificare xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Misti: mobile, tablet e desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Svuotamento colonne

Cancella i float in punti di interruzione specifici per evitare un avvolgimento imbarazzante con contenuto irregolare.

.col-xs-6 .col-sm-3
Ridimensiona il tuo viewport o controllalo sul tuo telefono per un esempio.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Reimposta offset, push e pull

Reimposta offset, push e pull in punti di interruzione specifici.

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