Pregunta

La plantilla de inicio para Bootstrap CSS incluye la siguiente línea en línea:

body {
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}

¿Qué razones prácticas hay para incluir este estilo en línea, mientras que todo el otro código está en un archivo .css externo?

¿Fue útil?

Solución

El estilo en línea se insertó deliberadamente entre bootstrap.css y bootstrap-responsive.css. Moviéndolo a main.css (y entonces después bootstrap-responsive.css) Mostrará el relleno sobre la barra de menú negro cuando se ajuste a una ventana más pequeña, al menos en IE 10 y Chrome 22.

Idealmente debería haberse agregado a bootstrap.css Pero no fue por alguna razón.

Otra solución sería ponerlo en un archivo CSS separado, pero eso requeriría descargar un archivo muy pequeño adicional.

Cargando main.css entre los dos bootstrap*.css Los archivos harían más difícil anular la configuración específica.

Así que supongo que es un compromiso.

Otros consejos

Podría haber varios casos,

  • Tal vez querían que esta regla anule cualquier cosa declarada en la hoja de estilo externa (aparte de !important normas). En línea <style> Los elementos se consideran automáticamente más específicos.
  • Tal vez querían que esta regla específica fuera exclusiva de esta página, y no a nivel mundial disponible en todo el sitio web. Es posible que la barra superior de 60px solo exista en esa página.
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top