2012-08-01 10 views
5

Io usoModificare il margine di 20px Twitter Bootstrap di default per le classi campata

<div id="windows"> 
    <div class="row-fluid"> 
     <div class="span4 mywindow">Text</div> 
     <div class="span4 mywindow">Text</div> 
     <div class="span4 mywindow">Text</div> 
    </div> 
</div> 

all'interno di un DIV #windows di larghezza speciale.

Desidero ridurre lo spazio predefinito di 20px tra questi tre blocchi.

questi codice css

#windows .span4 
{ 
    margin-right:-10px; 
} 

definisce uno spazio adeguato tra blocchi, ma ciascun blocco mantenere la stessa larghezza in modo che la larghezza totale è inferiore al 100% del div genitore (c'è uno spazio a destra).

Posso risolvere il problema modificando la larghezza dei blocchi utilizzando !important. Quindi la correzione è

#windows .span4 
{ 
margin-right:-10px; 
width:180px !important; 
} 

La domanda allora è: ha senso utilizzare Twitter Bootstrap classe span4 per le mie finestre se devo risolvere il problema così difficile?

Voglio dire, è una buona pratica correggere sia margin-right che width per le classi di estensione Bootstrap di Twitter o c'è una soluzione più semplice e migliore per sistemare i blocchi? P.S. Twitter Bootstrap viene utilizzato anche per altri scopi nella pagina (quindi span4 non è l'unico motivo per utilizzare Twitter Bootstrap nel mio caso).

risposta

7

Siete triyng per cambiare grondaia tra le colonne. Il modo più semplice per farlo è quello di personalizzare BS costruire prima che il download:

http://twitter.github.com/bootstrap/customize.html#variables

Change @gridGutterWidth valore lì (per layout fisso), quindi scaricare la build.

+0

Sei solo un genio! –

0

Questo potrebbe aiutare le persone con lo stesso problema a utilizzare il bootstrap come gemma in un'app per rails.

Se la vostra utilizzando bootstrap con la gemma 'bootstrap-sass' puoi direttamente sopra scrivere questo di default come segue:

.span{ 
    margin-left:0px; 
} 

Questo ignora il margine di default proposta dal gioiello.

Problemi correlati