Che cosa significa "Orizzontale in ogni momento"?

Question

La nuova documentazione di Bootstrap tre explains the grid behaviour come "Orizzontale in ogni momento" per dispositivi extra-piccoli. Cosa significa questo? Sicuramente su un piccolo dispositivo tutte le colonne sarebbero impilate verticalmente l'una sull'altra? Quello che mi sta venendo a mancare qui è la mia (mancanza di) comprensione di cosa sia una griglia.

Vengo da una prospettiva di non designer e cerco di scorrere su una serie di prodotti in una griglia reattiva. Il numero di colonne all'interno di ogni riga cambia a seconda che venga visualizzato un numero pari o dispari di prodotti. < - Bootstrap, e allo stesso modo sembra semplice con contenuto statico su pagine dinamiche. Ad esempio, dobbiamo inserire <div class="col-xs*"></div> vuoto per renderlo fino a 12?

Answer 1

Cosa significa "Orizzontale in ogni momento" significa che non vi è alcun punto di interruzione in corrispondenza del quale col-xs- * cambia da flottante a sovrapposto. Per esempio:

<div class="col-xs-6"></div> 
<div class="col-xs-6"></div> 

In questo esempio, ci saranno sempre due colonne di uguale dimensione, se siete su un telefono, tablet o desktop. Per contrasto:

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

In questo esempio, le colonne vengono impilate fino alla finestra del dispositivo è> = 768, a quel punto si passa a due colonne di uguale dimensione.

La domanda che potresti chiederti è "Perché tutte queste varianti?" Bene, ciò che queste opzioni ci danno è la possibilità di personalizzare il layout su vari dispositivi senza dover sporcarsi le mani in CSS. Ad esempio, se io volessi due colonne uguali su un telefono, ma un 75/25 diviso su tavolette e fino, vorrei fare le seguenti operazioni:

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

se si voleva impilati su telefoni, uguale su tablet, e il 75/25 sul desktop, quindi fare questo:

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

Perché non si specifica esplicitamente una griglia per il telefono, che sta per tornare a impilati.

Per ottenere una sensazione solida, lanciare alcune semplici griglie e quindi iniziare a ridimensionare il browser. Dovresti essere in grado di vedere come cambia molto più facilmente rispetto ai documenti stessi.

EDIT

Il pensiero di un altro esempio, che potrebbe essere di interesse: due colonne uguali sia a telefono e tablet, poi 75/25 e desktop. Il codice:

<div class="col-xs-6 col-md-8"></div> 
<div class="col-xs-6 col-md-4"></div> 

Questa è in realtà una grande illustrazione di "Orizzontale in ogni momento". Poiché non stiamo specificando un col-sm, i col-x continuano ad essere applicati fino a quando non raggiungiamo il punto di interruzione del desktop, che è impostato su> = 992.