2012-03-08 14 views
8

Sto usando twitter bootstrap in un progetto e mentre esaminavo la documentazione, mi sono imbattuto in un problema molto strano - se così si può chiamare.problema di rendering di bootstrap su twitter (lo stile dei pulsanti nei documenti differisce dall'uso locale)

Su http://twitter.github.com/bootstrap/base-css.html#buttons, ci sono molti pulsanti visualizzati uno accanto all'altro. Essi sembrano avere la spaziatura, ma lo stile computerizzata (in Firefox e Safari, dove ho studiato) è stato il seguente:

margin-top: 0 
margin-right: 0 
margin-bottom: 0 
margin-left: 0 

Questo non dovrebbe rendere in una distanza di 10 ~ px tra i singoli tasti.

Il padding di 9/14px sembra essere utilizzato solo per visualizzare la forma del pulsante.

Ora, quando utilizzo il bootstrap di Twitter sui miei progetti, il margine che vedo dal sito di twitter bootstrap doc sembra non funzionare localmente: i pulsanti sono incollati l'uno all'altro senza spaziature. Questo può essere corretto con un semplice locale margin, ma mi chiedo perché differisce dalla documentazione. Inoltre: perché non viene mostrato in firebug o negli altri strumenti di sviluppo?

risposta

3

Tutti i pulsanti hanno una proprietà di display:inline-block aggiunta a loro, display:inline-block dipende dalla dimensione del carattere ereditata dal contenitore. Se imposti il ​​p tag che racchiude i pulsanti su 0 o rimuovi i tag html, body e pfont-size, puoi vedere come viene rimosso tale spazio.

+0

Ho ancora problemi a ricreare questo sulla mia copia di sviluppo locale di bootstrap. Grazie mille per la spiegazione. Sembra che l'aggiunta di font al contenitore non aggiunga spazi ai pulsanti, non sto facendo abbastanza? – arvidkahl

+1

Devi scegliere come target tutti gli elementi con la proprietà 'font-size' che contiene i tuoi pulsanti. Ad esempio, nella demo di bootstrap i tag 'html',' body' e 'p' hanno tutti la proprietà' font-size' ad essi aggiunta, quindi dovresti impostarli su 0 per testarlo, oppure puoi imposta semplicemente 'font-size: 0' al contenitore dei tuoi pulsanti e una' font-size' agli elementi stessi, es '.container {font-size: 0; } .child-element {font-size: 16px} '. –

+0

Grazie per il tuo aiuto, mentre esaminavo il tuo modo di pensare, mi sono imbattuto nel mio vero problema - non avendo spazio tra i tag "a". Non stavo pensando a loro come contenuto testuale, il tuo approccio con la dimensione dei caratteri mi ha portato lì. – arvidkahl

0

La soluzione è piuttosto semplice: i dintorni <td> s hanno uno stile di padding: 8px più un bordo di un singolo pixel. Rimuovendo quelli rimuove completamente il margine percepito.

+0

Questo lo spiega per la tabella, ma per quanto riguarda i pulsanti sottostanti che sono allineati orizzontalmente? – arvidkahl

Problemi correlati