Bootstrap 3 grid, è davvero * importante * quante colonne ci sono in una fila?

Ho un layout del modulo che contiene gruppi di moduli bootstrap 3. Voglio questi gruppi di moduli in una singola colonna su <small, 2 colonne su break di dimensioni tablet e 4 colonne su schermi più grandi.

A quanto pare ho funzionato perfettamente, tuttavia dopo aver fatto qualche lettura qui ciò che ho fatto sembra violare la presunta regola che ogni colonna di fila deve aggiungere fino a 12. Tuttavia ogni tutorial e documenti che potrei trovare sempre usano parole donnole come “dovrebbe” o “idealmente” quando dice che dovrebbe aggiungere fino a 12. Non sembra essere una guida chiara qui.

Ho definito i miei gruppi in questo modo:

e attualmente ne ho 4 in ogni riga. Ciò significa che il 4 * col-lg-3 aggiunge fino a 12 ma i div di gruppo di 4 * col-md-6 formano un massimo di 24 non 12.

Tuttavia questo non sembra avere importanza e funziona perfettamente ad ogni punto di interruzione.

Dovrei essere preoccupato? Ha importanza in qualche modo? Sicuramente non dovrei fare due layout completamente diversi che duplicano tutti questi controlli una volta ciascuno per col-md-6 e col-lg-3 sulla stessa pagina?

No, non c’è nulla che imponga che la griglia di bootstrap debba aggiungere fino a 12 colonne.
È solo una preferenza / cosa stilistica.

Meno di 12 colonne -> Allinea a sinistra:

Se hai meno di dodici colonne riempite, per impostazione predefinita verranno lasciate allineate, lasciando spazio vuoto a destra.

Il seguente codice :

 
Hi
Hi
 .row > div { background: lightgrey; border: 1px solid grey; } 

Risultati in questo: ( Demo in Fiddle )

immagine dello schermo

Più di 12 colonne -> Impacchi:

Se il totale si aggiunge a più di 12 colonne, purché le colonne si trovino all’interno di una class di row , verranno semplicemente ricollocate su righe aggiuntive. Un buon caso d’uso sarebbe un sistema di foto-griglia in cui vorresti aggiungere tonnellate di foto ma non sai quante righe avrai e vorresti comunque definire il numero di colonne.

Il seguente codice :

 
Hi
Hi
Hi
Hi

Risultati in questo: ( Demo in Fiddle )

screenshot2

A parte questo, a volte è il caso che i layout di 12 colonne sembrano migliori, ma non devi usarli; non è un sudoku 🙂

4 * col-md-6 creerà 2 “righe” su uno schermo medio. Dato che stai avvolgendo tutto in un file .row funzionerà come previsto. Se l’hai rimosso, le cose si annideranno l’una accanto all’altra

per esempio

 
Hello
Hello

produrrà 2 righe con 1 colonna ciascuna di 16.67% come larghezza della riga genitore e fluttuante a sinistra perché una riga ha larghezza 100%. Le larghezze delle colonne sono specificate da col – ** – (numero / 12) in percentuale (2/12 = 0,166667)

 
Hello
Hello

produrrà 1 riga con 2 colonne ognuna di 16.667% come larghezza dell’object genitore. Quindi potresti rinunciare al .row se lo facessi

 

Questo creerà: Schermo piccolo (4 colonne a larghezza intera) Schermo medio (2 righe 2 colonne ciascuna larghezza 50%) Schermo grande (1 riga 4 colonne ogni larghezza 25%)

Ho visto molti siti web usare “col-xs-12 col-md-10 col-md-offset-1” ultimamente. L’offset centra il contenuto, ma ogni riga viene riempita con solo 11 colonne. Se l’elemento successivo è un col-1, deve includere anche col-offset-1 (forzando un totale di 13, spostando il col-1 con offset-1 alla riga successiva, allineandolo bene). Se l’elemento successivo è più largo, ha ancora bisogno dell’offset (per saltare la prima colonna).

Dal lato CSS, tutto funziona con le percentuali. Se la larghezza totale delle colonne è superiore al 100%, deve forzare l’elemento successivo su una nuova riga. U può facilmente giocare con questo concetto creando un file html con un sacco di div. Aggiungi il seguente css ai div (basi di bootstrap)

 body > div { margin: 0; padding: 0; float: left; width: 8.333333% (or 1/12th) } 

Quindi puoi cambiare la dimensione delle div individuali per vedere cosa succede. Potrebbe essere più facile giocare con valori arrotondati (ad esempio 10% / 20%), semplicemente attaccato al bootstrap qui. Spero che questo ti dia una comprensione di come il browser gestisce la griglia di bootstrap (di cui hai appena creato una versione base)

Anche i documenti Bootstrap su columnwrapping danno un buon esempio.