Exceso de espacio en blanco sobre la barra de administración en la interfaz usando Twitter Bootstrap

2

El problema (Exceso de espacio en blanco sobre la barra de administración en la interfaz usando Twitter Bootstrap):

Mientras está conectado y visualiza la interfaz: si reduce el tamaño de su navegador, hay un exceso de espacio en blanco que aparece ARRIBA en la barra de administración. He notado que está bien en pantalla completa, e incluso ~ tamaño de tableta. Sin embargo, cuando está a punto de reducirse a algo más pequeño que alrededor de 600px, es cuando aparece el espacio en blanco SOBRE la barra de administración. Lo he probado en mi teléfono y el espacio en blanco está también en mi teléfono.

La pregunta:

¿Se trata de un problema conflictivo con WordPress o hay algo que deba hacer con mi configuración de Twitter Bootstrap?

Cualquier consejo sobre la eliminación de este exceso de espacio en blanco sobre la barra de administración mientras se ve la interfaz (usando Twitter Bootstrap - Responsive) en un dispositivo móvil sería muy apreciado.

    
pregunta Michael Ecklund 18.02.2014 - 18:49

2 respuestas

10

También me encontré con este problema, la causa de esto es que a 600 píxeles de ancho, la barra de administración pasa de ser posición: fija a posición: absoluta;

Cuando se fija, se bloquea en la parte superior de la pantalla (arriba: 0)

Cuando está absoluto, está bloqueado en la parte superior del contenedor más cercano que lo contiene. Este es el elemento html por defecto, pero si un padre está definido para tener una posición (en nuestro caso, el cuerpo tiene una definición de posición), entonces contendrá a todos sus hijos, y sus reglas de posición se basarán en su posición. Dado que el elemento html tiene un margen superior de 46 píxeles, empuja el cuerpo hacia abajo en 46 píxeles. Por lo tanto, dado que el cuerpo tiene 46 píxeles hacia abajo, lo mejor que puede lograr nuestra barra de administración es la parte superior de nuestro cuerpo, no la parte superior de la página.

Si necesitas tener una posición: relativa al cuerpo, puedes hacer un par de cosas para solucionar esto. Puedes agregar cualquiera de estas reglas a tu archivo css de temas y se sobrescribirá el wordpress css predeterminado.

  1. Puede anular la regla absoluta de la posición de la barra de administración y cambiarla a fija. Esto hará que la barra de administración se desplace por la página para que siempre la veas en la parte superior, sin importar dónde estés en la página.

    html #wpadminbar{position:fixed};

  2. Puedes cambiar la posición de la barra de administración para tener un máximo de -46px en resoluciones de menos de 600px; Esto mantiene la barra en la parte superior de la página en pantallas pequeñas para que no ocupe el estado real de la pantalla a medida que se desplaza.

    @media screen and (max-width:600px){html #wpadminbar{top:-46px}}

respondido por el Jacob Swain 21.02.2014 - 23:25
0

Era algo simple. Tenía position: relative; establecido para el body .

Ejemplo :

body {
    position: relative;
}

No tengo idea de POR QUÉ lo afectaría, pero al eliminar position: relative; para la etiqueta <body> se corrigió el exceso de espacio en blanco sobre la barra de administración en la interfaz mientras que el tamaño del navegador es < 600px.

    
respondido por el Michael Ecklund 18.02.2014 - 19:58

Lea otras preguntas en las etiquetas