Si applica solo a Bootstrap 3.
Ignorando le lettere (x s , sm , md , lg ) per ora , inizierò solo con i numeri ...
- i numeri (1-12) rappresentano una porzione della larghezza totale di qualsiasi div
- tutti i div sono divisi in 12 colonne
- quindi, si
col-*-6estende su 6 di 12 colonne (metà della larghezza), si col-*-12estende su 12 di 12 colonne (l'intera larghezza), ecc
Quindi, se vuoi che due colonne uguali si estendano su un div, scrivi
<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>
Oppure, se si desidera che tre colonne disuguali si estendano su quella stessa larghezza, è possibile scrivere:
<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>
Noterai che il numero di colonne aggiunge sempre fino a 12. Può essere inferiore a dodici, ma fai attenzione se più di 12, poiché i tuoi div offensivi passeranno alla riga successiva (no .row, che è un'altra storia del tutto).
Puoi anche nidificare le colonne all'interno delle colonne , (meglio con un .rowwrapper attorno ad esse) come:
<div class="col-xs-6">
<div class="row">
<div class="col-xs-4">Column 1-a</div>
<div class="col-xs-8">Column 1-b</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-2">Column 2-a</div>
<div class="col-xs-10">Column 2-b</div>
</div>
</div>
Ogni set di div nidificati comprende inoltre fino a 12 colonne del div genitore. NOTA: poiché ogni .colclasse ha un'imbottitura di 15px su entrambi i lati, di solito dovresti avvolgere le colonne nidificate in a .row, che ha margini di -15px. Ciò evita di duplicare l'imbottitura e mantiene il contenuto allineato tra classi col nidificate e non nidificate.
- Non hai chiesto specificamente xs, sm, md, lgsull'uso, ma vanno di pari passo quindi non posso fare a meno di toccarlo ...
In breve, vengono utilizzati per definire a quale dimensione dello schermo quella classe dovrebbe applicare:
- xs = schermi extra piccoli (telefoni cellulari)
- sm = schermi piccoli (tablet)
- md = schermi medi (alcuni desktop)
- lg = schermi grandi (desktop rimanenti)
Leggi la " Opzioni griglia "
capitolo dalla documentazione ufficiale di Bootstrap per maggiori dettagli.
Di solito dovresti classificare un div usando più classi di colonne in modo che si comporti in modo diverso a seconda delle dimensioni dello schermo (questo è il cuore di ciò che rende reattivo bootstrap). ad es .: un div con classi col-xs-6e col-sm-4coprirà metà dello schermo sul cellulare (xs) e 1/3 dello schermo su tablet (sm).
<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->
NOTA: come da commento qui di seguito, le classi di griglia per una dimensione dello applicano alla dimensione dello schermo e più grande a meno un'altra dichiarazione override (cioè col-xs-6 col-md-4campate 6 colonne su xs esm , e 4 colonne su md elg , anche se sme lgnon sono mai stati esplicitamente dichiarato)
NOTA: se non lo definisci xs, per impostazione predefinita sarà col-xs-12(ovvero col-sm-6metà della larghezza attivata sm,md e lgschermi, ma di grande ampiezza su xsschermi).
NOTA: in realtà va benissimo se .rowincludi più di 12 cols, purché tu sia consapevole di come reagiranno. - Questa è una questione controversa, e non tutti sono d'accordo.
