2012-03-08 15 views
8

Estoy usando twitter bootstrap en un proyecto y mientras revisaba la documentación, me encontré con un problema muy extraño, si es que así se puede llamar.Problema de representación de arranque de twitter (el estilo de los botones difiere del uso local)

En http://twitter.github.com/bootstrap/base-css.html#buttons, hay una gran cantidad de botones que se muestran uno al lado del otro. Parece que tienen el espaciado, pero el estilo computarizada (en Firefox y Safari, donde investigué) fue el siguiente:

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

esto no debería representar en una distancia de 10 ~ píxeles entre los botones individuales.

El relleno de 9/14px solo parece usarse para mostrar la forma del botón.

Ahora cuando uso Twitter bootstrap en mis propios proyectos, el margen que veo en el sitio de arranque de doc de Twitter parece no funcionar localmente - los botones se pegan entre sí sin espaciado. Esto se puede rectificar con un simple local margin, pero me pregunto por qué difiere de la documentación. Además, ¿por qué no se muestra en Firebug o en otras herramientas de desarrollo?

Respuesta

3

Todos los botones tienen una propiedad de display:inline-block agregada a ellos, display:inline-block depende del tamaño de fuente que se hereda de su contenedor. Si configura el font-size en las etiquetas p que encierran los botones en 0 o quita las etiquetas html, body y pfont-size, puede ver cómo se elimina ese espacio.

+0

Todavía tengo problemas para volver a crear esto en mi copia de desarrollo local de bootstrap. Muchas gracias por la explicación tú. Parece que agregar tamaño de fuente al contenedor no agrega espacio a los botones, ¿no estoy haciendo lo suficiente? – arvidkahl

+1

Tiene que orientar todos los elementos con la propiedad 'font-size' que contienen sus botones. Por ejemplo, en la demostración de arranque, las etiquetas 'html',' body' y 'p' tienen agregada la propiedad' font-size', por lo que tendrías que establecerlas en 0 para probarlas, o puedes simplemente configure 'font-size: 0' en el contenedor de sus botones y' font-size' en los elementos, p. ej. '.container {font-size: 0; } .child-element {font-size: 16px} '. –

+0

Gracias por su ayuda, mientras examinaba su línea de pensamiento, me encontré con mi problema real: no tener espacio en blanco entre las etiquetas "a". No estaba pensando en ellos como contenido textual, su enfoque con el tamaño de letra me llevó allí. – arvidkahl

0

La solución es bastante simple: los <td> s circundantes tienen un estilo de padding: 8px más un borde de un solo píxel. Eliminarlos elimina por completo el margen percibido.

+0

Eso lo explica para la tabla, pero ¿qué pasa con los botones de abajo que están alineados horizontalmente? – arvidkahl

Cuestiones relacionadas