Bootstrap Sticky Footer überlappender Inhalt

8

Ich bin neu in Bootstrap und versuche es mit Symfony2 zu benutzen. Ich habe bereits ein Haupt-Topbar-Sticky, das für die Navigation verwendet wird. Mein Problem ist, wenn ich versuche, eine ähnliche Fußzeile hinzuzufügen, die unten klebrig ist, aber sie überlappt meinen Inhalt. Ich benutze ein JQuery-Skript, um das Problem für die obere Navigationsleiste zu vermeiden:

%Vor%

Die Struktur meines Haupt-Twig-Layouts ist wie folgt:

%Vor%

Mein CSS ist original. Ich habe versucht mit margin bottom oder padding bottom , aber die Überlappung meines Inhalts (im {% block body%}) ist immer vorhanden, und ich weiß nicht, was zu tun ist, um es zu beheben. Hat jemand eine Idee?

    
lll 13.10.2014, 08:56
quelle

3 Antworten

20

Dies ist ein älteres Thema ohne Antwort ausgewählt.

Ich befinde mich in einer frischen Bootstrap-Vorlage, portiere sein aktuelles Theme abschnittweise in Bootstrap:)

Ich habe eine sticky-Kopfzeile und möchte, dass die Fußzeile bei ALL nach unten gesperrt wird. Ich hatte es funktioniert, aber wenn ich es neu anpasste, um es responsive anzuzeigen, überlappte die Fußzeile den Inhalt. Ich brauchte einen Abstand zwischen "Inhalt" und "Fußzeile", damit es nicht zusammenmustert.

margin-bottom auf dem body-Tag hat nicht funktioniert, es hat eine Lücke unter meiner Fußzeile hinzugefügt. Wenn Sie darüber nachdenken, wie sich ein Rand auf dem "body" -Tag verhält, macht das nur Sinn.

Die richtige Antwort lautet "padding-bottom" für das body-Tag. Ich habe eine Größe 6 Pixel größer als die Höhe meiner Fußzeile verwendet, um diesen kleinen Abstand / Abstand sicherzustellen.

%Vor%

Deine Höhen wären natürlich anders. Hoffe das hilft!

    
Wade Shuler 26.03.2015 16:53
quelle
7

Standardmäßig wird dies für Bootstrap-Kopf- und Fußzeilen erwartet. Sie bleiben oben oder unten und überlappen den Hauptinhalt. Die Lösung für Fußzeilen ist das Hinzufügen von margin-bottom: [footer height]; zum body , wie im Anpassungsbeispiel auf der Bootstrap-Site :

sticky-footer.css

%Vor%

Sie erwähnen margin-bottom in Ihrer Frage. Wenn das für Sie nicht funktioniert, könnten Sie vielleicht posten, was Sie tatsächlich versucht haben?

P.S. Das hat wahrscheinlich nichts mit Symfony zu tun!

    
frumious 13.10.2014 09:16
quelle
0

Machen Sie float: links es hat mein Problem gelöst .footer { float:left; }

    
Muhamed Shafeeq 10.05.2016 11:11
quelle

Tags und Links