2014-05-24 10 views
18

Ho questo codice <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs"> e bootstrap sta facendo l'offset anche sul col-md-12, sto verificando il codice e ho Non capisco perché questo sta accadendo, penso che questo non stava succedendo prima, ma ho tornare indietro un sacco di passaggi nel codice forse al punto che stava funzionando e niente.Bootstrap 3 col-sm-offset-x ha effetto sulla struttura col-md-x

Se rimuovo l'offset funziona come supponiamo ... ma non ho l'offset su risoluzioni più piccole.

questa è la pagina dove si può vedere il problema: Test page

è il blocco in cui si mette "Especial 52º Aniversario"

Grazie per l'aiuto, mi sta facendo noci

+0

quale linea il numero del codice sorgente pensi che causa l'errore? – bob

+0

Quello che inserisco nel messaggio "div class =" col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs ">" per qualche ragione a grande risoluzione sta applicando l'offset che ho messo su piccola risoluzione – amibumping

risposta

61

L'offset si applica da sm fino alla dimensione massima. Per interromperlo, aggiungere col-md-offset-0 per impedire che l'offset si applichi a dimensioni maggiori.

+0

SI !!! Molte grazie! Non lo sapevo, penso che le informazioni non siano nella documentazione di bootstrap, ma grazie :) – amibumping

+1

@ user3652601 È nella documentazione. Da http://getbootstrap.com/css/#grid: "Le classi Grid si applicano a dispositivi con larghezze dello schermo maggiori o uguali alle dimensioni del punto di interruzione e sostituiscono le classi della griglia indirizzate a dispositivi più piccoli. Pertanto, applicare qualsiasi .col-md- la classe di un elemento non influisce solo sul suo stile su dispositivi di medie dimensioni ma anche su dispositivi di grandi dimensioni se una classe .col-lg- non è presente. " – cvrebert

+0

Grazie DavidG per la tua risposta bella, chiara e semplice –

2

Bootstrap 3 = Mobile per primo.

Tutti gli stili si applica in 'size' xs gamma sarà effettuato fino alle 'dimensioni' più grandi a meno che non si sta utilizzando i programmi di utilità di supporto come la classe .Visible-sm

Se si desidera avere una sola colonna compensato che è visibile durante la piccola gamma solo:

<div class="row"> 
     <div class="col col-md-12 col-sm-6 col-sm-offset-1 hidden-xs"> 
     <div class="col-sm-1 visible-sm"><div> 
     <div> 
      ...continue your content 
     </div>