Annidiare le colonne
Bootstrap permette di annidare le colonne, cioè di inserire una nuova griglia all’interno di un’altra griglia. Per farlo è sufficiente definire una riga (un div con classe "row") all’interno di una colonna e quindi definire le colonne annidate all’interno di ciascuna riga.
Ogni riga annidata contiene a sua volta una griglia di 12 colonne che si possono riempire esattamente come quella della griglia di primo livello.
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>colonna 1</h2>
<!-- COLONNE ANNIDIATE -->
<div class="row">
<div class="col-md-3">colonna annidata 1</div>
<div class="col-md-3">colonna annidata 2</div>
<div class="col-md-3">colonna annidata 3</div>
<div class="col-md-3">colonna annidata 4</div>
</div>
</div>
<div class="col-md-6">
<h2>colonna 2</h2>
</div>
</div>
</div>
Ordinamento
Una altra proprietà delle colonne è l’ordinamento: non necessariamente, infatti, esse devono essere definite nell’ordine in cui si desidera che appaiano. Le colonne possono essere create nell’ordine che si desidera e poi riordinate grazie alle classi .col-md-push-N e .col-md-pull-N dove N è un numero da 1 a 11 che indica lo spostamento che si vuole ottenere per la colonna. La proprietà .col-md-push-N comporta uno spostamento verso destra e .col-md-pull-N uno verso sinistra.
Nel gestire gli spostamenti bisogna fare molta attenzione alle dimensioni delle colonne e quelle degli spazi che andranno ad occupare per evitare che le colonne spostate si sovrappongano. L’operazione più semplice che non richiede troppi conteggi, permette di usare queste classi per invertire due colonne.
<div class="container">
<div class="row">
<div class="col-md-5 col-md-push-7">
<h1>Colonna 1</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
<div class="col-md-7 col-md-pull-5">
<h1>Colonna 2</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
</div>
</div>
Altre situazioni più complesse richiedono, come dicevamo sopra, un ricalcolo degli spazi e delle dimensioni. Ecco un esempio di tre colonne di dimensioni diverse mostrate in ordine invertito.
Notate che anche la seconda colonna, che pure rimane in seconda posizione, va spostata verso sinistra di una colonna della griglia in modo che in prima posizione trovi spazio la terza colonna che si espande su 4 quattro colonne della griglia, mentre la prima colonna originale si espande solo su 3 colonne della griglia.
<div class="container">
<div class="row">
<div class="col-md-3 col-md-push-9">
<h1>Colonna 1</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
<div class="col-md-5 col-md-push-1">
<h1>Colonna 2</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
<div class="col-md-4 col-md-pull-8">
<h1>Colonna 3</h1>
"Lorem ipsum dolor sit amet, ..."
</div>
</div>
</div>
