webentwicklung-frage-antwort-db.com.de

Überschüssiger Leerraum über der Admin-Leiste im Frontend mit Twitter Bootstrap

Das Problem (übermäßiger Leerraum über der Admin-Leiste im Frontend mit Twitter Bootstrap):

Während Sie angemeldet sind und das Frontend anzeigen - Wenn Sie Ihren Browser verkleinern, wird ÜBER der Admin-Leiste eine übermäßige Menge an Leerraum angezeigt. Mir ist aufgefallen, dass es im Vollbildmodus und sogar in der Größe eines Tablets in Ordnung ist. Wenn Sie jedoch auf eine Größe von weniger als 600 Pixel verkleinern möchten, wird der weiße Bereich ÜBER der Admin-Leiste angezeigt. Ich habe auf meinem Telefon getestet, und der Leerraum ist auch auf meinem Telefon vorhanden.

Die Frage:

Ist dies ein Konflikt mit WordPress oder muss ich etwas mit meinem Twitter Bootstrap-Setup tun?


Für Hinweise zur Beseitigung dieses übermäßigen Leerraums über der Admin-Leiste beim Anzeigen des Frontends (mithilfe von Twitter Bootstrap - Responsive) auf einem mobilen Gerät sind wir sehr dankbar.

2
Michael Ecklund

Ich bin auch gerade auf dieses Problem gestoßen. Der Grund dafür ist, dass die Admin-Leiste bei einer Breite von 600 Pixeln von Position: Fest zu Position: Absolut wechselt.

Wenn es repariert ist, ist es am oberen Bildschirmrand verriegelt (oben: 0)

Wenn absolut, ist es an der Spitze des nächstgelegenen Containers gesperrt, der es enthält. Dies ist standardmäßig das HTML-Element. Wenn jedoch für ein übergeordnetes Element eine Position definiert ist (in unserem Fall hat der Körper eine Positionsdefinition), enthält es alle untergeordneten Elemente und die Positionsregeln basieren auf dieser Position. Da das HTML-Element einen oberen Rand von 46 Pixel hat, wird der Körper um 46 Pixel nach unten gedrückt. Da der Körper also um 46 Pixel nach unten gedrückt wird, kann unsere Admin-Leiste am besten den oberen Rand unseres Körpers und nicht den oberen Rand der Seite erreichen.

Wenn Sie eine Position haben müssen: relativ zum Körper, können Sie ein paar Dinge tun, um dies zu umgehen. Sie können eine dieser Regeln zu Ihrer Themes-CSS-Datei hinzufügen und die standardmäßige WordPress-CSS wird überschrieben.

  1. Sie können die absolute Regel für die Position der Admin-Leiste überschreiben und sie wieder auf "Fest" stellen. Dadurch scrollt die Admin-Leiste mit der Seite, sodass Sie sie immer oben sehen, unabhängig davon, wo Sie sich auf der Seite befinden.

    html #wpadminbar{position:fixed};

  2. Sie können die Position der Admin-Leiste so ändern, dass bei Auflösungen unter 600px ein Höchstwert von -46px erreicht wird. Auf diese Weise bleibt die Leiste auf kleinen Bildschirmen oben auf der Seite, sodass sie beim Scrollen keine reale Bildschirmgröße einnimmt.

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

10
Jacob Swain

Es war etwas Einfaches. Ich hatte position: relative; für die body eingestellt.

Beispiel:

body {
    position: relative;
}

Ich habe keine Ahnung, wieso dies Auswirkungen haben würde, aber das Eliminieren von position: relative; für das <body> -Tag hat den übermäßigen Leerraum über der Admin-Leiste im Frontend behoben, während die Browsergröße <600px ist.

0
Michael Ecklund