2013-08-16 12 views
14

Ho provato a cercare una risposta a questo senza alcun risultato. Fondamentalmente quello che mi chiedo è se è necessario specificare un valore col-md- * in Bootstrap 3, o se si può semplicemente usare, per esempio, col-xs-12 e col-sm- * e avere il col-sm - * valore dettare le dimensioni della colonna fino alla visualizzazione massiccia.È necessario aggiungere il selettore col-md in Bootstrap 3?

Questo sembra un gioco da ragazzi (che avere col-sm sarebbe a posto) ma la documentazione include anche valori colmd- * apparentemente ridondanti, come qui (tratto da "Esempio: Mobile, Tablet, e Desktop" sotto "Grid System" nella sezione CSS:.!

<div class="row"> 
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> 
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
    <div class="clearfix visible-xs"></div> 
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div> 
</div> 

Qualsiasi chiarimento sarebbe molto apprezzato Grazie

risposta

15

la tua intuizione è corretta, il valore più basso impostato (xs, sm o md) sarà dettare per le dimensioni dello schermo più grandi, questo significa che se vuoi che il div divida 4 colonne partendo dai dispositivi piccoli e fino in fondo, devi solo impostare .col-sm-4.

Funziona in questo modo a causa di come i media query sono istituiti:

/* Extra small devices (phones, up to 480px) */ 
/* No media query since this is the default in Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-tablet) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-desktop) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-large-desktop) { ... } 

se non vengono escluse, classi per dispositivi di piccole dimensioni si applicheranno a schermi più grandi e

+1

Grazie! Per qualche motivo questo non sembra essere sempre il mio caso, ma suppongo che sia colpa dell'errore umano da parte mia. La principale manifestazione di ciò che vedo è col-md che non si espande fino a col-lg quando coinvolge offset. –

+1

@JeffW Ho fatto un semplice test case con offset e sembra funzionare correttamente http://jsfiddle.net/Lde6n/show/ assicurati di utilizzare l'ultima versione dei file CSS come ricordo di aver visto i candidati del rilascio non avere la funzione di offset ben implementata. Se ciò non risolve il problema, potresti postare un violino con il markup che stai utilizzando per vedere se possiamo risolvere il problema –

+0

Molto utile e rovinare la mia domanda che ho scritto e in attesa di postare in un'altra scheda. – kstubs

Problemi correlati