Comprensione delle classi della griglia (col-sm- # e col-lg- #) in Bootstrap 3

Sto iniziando con Bootstrap 3 e ho qualche problema a capire come devono essere utilizzate le classi della griglia.

Ecco cosa ho capito finora:

Sembra che le classi col-sm-#e col-lg-#differiscano dal vecchio normale col-#in quanto si applicano solo quando gli schermi superano una certa dimensione (rispettivamente 768px e 992px). Se ometti -sm- o -lg- i div non verranno mai compressi in una colonna.

Tuttavia, quando si crea due div all'interno di una riga che sono entrambi col-sm-6sembra che sono solo fianco a fianco quando la finestra è tra 768px e 992px di larghezza. In altre parole, se le dimensioni della finestra fino in fondo e poi lentamente allargarlo, il layout è singola colonna, quindi due colonne, poi di nuovo a singola colonna di nuovo .

1. È questo il comportamento previsto?
2. Se voglio due colonne per qualcosa di più di 768px, dovrei applicare entrambe le classi? ( <div class="col-sm-6 col-lg-6">)
3. Dovrebbe col-6 anche essere inclusi?<div class="col-6 col-sm-6 col-lg-6">

[AGGIORNAMENTO SOTTO]

Ho dato un'altra occhiata ai documenti e sembra che abbia trascurato una sezione che parla specificamente di questo.

Le risposte alle mie domande:

1. Sì, sono pensati per essere applicati solo a intervalli specifici, piuttosto che a tutto ciò che supera una certa larghezza.

2. Sì, le classi sono pensate per essere combinate.

3. Sembra che questo sia appropriato in alcuni casi ma non in altri perché le classi col- # sono sostanzialmente equivalenti a col-xsm- # o, larghezze superiori a 0px (tutte le larghezze).

Oltre a leggere i documenti troppo velocemente, penso di essere stato confuso perché sono entrato in Bootstrap 3 con una "mentalità Bootstrap 2". In particolare, stavo usando gli stili reattivi (facoltativi) (bootstrap-responsive.css) in v2 e v3 è abbastanza diverso (per il migliore IMO).

AGGIORNAMENTO per il rilascio stabile:

Questa domanda è stata scritta originariamente quando RC1 era uscito. Hanno apportato alcune modifiche importanti in RC2 quindi per chiunque legga questo ora, non tutto ciò di cui sopra si applica ancora.

Al momento in cui sto scrivendo questo articolo, le col-*-#classi sembrano applicarsi verso l'alto. Quindi, ad esempio, se desideri che un elemento sia di 12 colonne (a tutta larghezza) per i telefoni, ma due di 6 colonne (mezza pagina) per i tablet e superiori, dovresti fare qualcosa del genere:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(Hanno anche aggiunto un ulteriore punto di interruzione xs dopo che questa domanda è stata scritta.)

Ecco un ottimo tutorial, che spiega come utilizzare le nuove classi della griglia in Bootstrap 3.

Copre anche mixin ecc.

"Se voglio due colonne per qualcosa di più di 768px, devo applicare entrambe le classi?"

Dovrebbe essere semplice come:

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

Non c'è bisogno di aggiungere col-lg-6anche il file.

Demo: http://www.bootply.com/73119

Il modo migliore per capire è semplicemente pensare dall'alto verso il basso (da desktop di grandi dimensioni a telefoni cellulari)

In primo luogo, poiché B3 è prima mobile, quindi se usi xs, le colonne saranno le stesse da Large desktop a xs (ti consiglio di usare xs o sm perché questo manterrà tutto nel modo desiderato su ogni dimensione dello schermo)

In secondo luogo, se vuoi dare una larghezza diversa alle colonne su diversi dispositivi o risoluzioni, puoi aggiungere più classi ad es

quanto sopra cambierà la larghezza in base alle risoluzioni dello schermo, RICORDA che mantengo le colonne totali in ogni classe = 12

Spero che la mia risposta possa aiutare!

Per modificare la risposta di SDP sopra, NON è necessario dichiarare col-xs-12in <div class="col-xs-12 col-sm-6">. Bootstrap 3 è mobile-first, quindi si presume che ogni colonna div sia un div di larghezza del 100% per impostazione predefinita, il che significa che alla dimensione "xs" è della larghezza del 100%, sarà sempre impostato su quel comportamento indipendentemente da ciò che hai impostato sm, md, lg. Se vuoi che le tue xscolonne non siano al 100%, normalmente fai un col-xs-(1-11).

Questo potrebbe essere in ritardo perché penso che la maggior parte di noi stia usando BS4. Questo articolo ha spiegato tutte le domande che hai posto in modo dettagliato e semplice e include anche cosa fare quando. La guida dettagliata per utilizzare bs4 obootstrap

https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7