¿Hojas de estilo de agente de usuario anulando el estilo de mi tabla? Bootstrap de Twitter

StackOverflow https://stackoverflow.com/questions/9308234

  •  25-10-2019
  •  | 
  •  

Pregunta

Estoy usando Bootstrap de Twitter. Mi problema es que los tamaños de fuente en las tablas están equivocados. Por alguna razón, la hoja de estilo del agente de usuario está anulando los estilos de la tabla Bootstrap.

En la página de bootstrap de Twitter (http://twitter.github.com/bootstrap/base-css.html) Todo, por supuesto, funciona correctamente.

En mi inspector veo la siguiente diferencia:

Mi página:

CSS style for my page

La página de bootstrap de Twitter:

CSS style for twitter bootstrap page

Definitivamente, el problema es que la hoja de estilo del agente de usuario está anulando los estilos de bootstrap.

No he podido averiguar por qué esto es diferente en mi página y en la página Bootstrap de Twitter.

La mayoría de los otros CSS funciona bien.

Mi importación de CSS:

<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">

Importar CSS en la página Bootstrap de Twitter:

<link href="assets/css/bootstrap.css" rel="stylesheet">
¿Fue útil?

Solución

De hecho, descubrí esto yo mismo. tuve el <!DOCTYPE html> etiqueta erróneamente escrita. Entonces, si tiene este problema, asegúrese de que la declaración de Doctype sea correcta.

Otros consejos

Importe los documentos también en su solicitud. Si debo decirlo, debes haberse dado cuenta de que el Documentos de Bootstrap de Twitter están utilizando bootstrap.css y un documento personalizado. Intente hacer, que puede descargar desde el paquete GitHub. Luego, intente jugar con las clases de mesa en Docs. CSS sin meterse con el maestro CSS. O intente agregar doctype en encabezados.

<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">

Si declara <!DOCTYPE html> Al principio no funciona, entonces probablemente no sea su hoja de estilo de agente de usuario que lo supera. Puede ser la hoja de estilo de Bootstrap anulando sus estilos (he tenido este problema). Asegúrese de que su hoja de estilo esté vinculada a después Hoja de estilo de Bootstrap en su HTML.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->

Tuve el mismo problema que el OP. Quería un mensaje pequeño y encantador y una hoja de estilo de usuario lo estaba en exceso y poniendo:

font-size: medium;

Cuando quería:

font-size:8pt;

Colocé lo siguiente en la parte superior de mi página HTML:

<!DOCTYPE html>

Todo fue bueno entonces, un mal hábito para no declarar Doctype en la parte superior. Todas las hojas de estilo de usuario se han ido.

Para descubrir qué está anulando qué en su CSS siempre es una buena idea inspeccionar el elemento (F12) y puede modificar y desmarcar atributos sobre la marcha hasta que llegue a la correcta, ¡luego actualice su archivo CSS con él!

Sin embargo, si tiene un problema de hoja de estilo de usuario, estos valores se bloquearán.

Compruebe si su CSS se llama o no en herramientas de desarrollo del navegador (presione F12) en la columna de red.

Si no se llama, usa tus hojas de estilo con 1 rel="stylesheet" type="text/css".

Funcionó para mí.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top