Fußzeile in Bootstrap behoben

Ich probiere Bootstrap aus und habe mich gefragt, wie ich die Fußzeile unten reparieren kann, ohne dass sie von der Seite verschwindet, wenn der Inhalt gescrollt wird.

Geben Sie eine feste Position wie folgt ein, um eine Fußzeile zu erhalten, die am unteren Rand Ihres Ansichtsfensters haftet:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap enthält dieses CSS im Abschnitt Navbar> Platzierung mit der Klasse fixed-bottom. Fügen Sie diese Klasse einfach Ihrem Fußzeilenelement hinzu:

<footer class="fixed-bottom">

Bootstrap-Dokumente: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Füge das hinzu:

<div class="footer navbar-fixed-bottom">

https://stackoverflow.com/a/21604189

BEARBEITEN: Die Klasse navbar-fixed-bottomwurde ab fixed-bottomBootstrap v4-alpha.6 geändert.

http://v4-alpha.getbootstrap.com/components/navbar/#placement

Füge das hinzu:

<div class="footer fixed-bottom">

Fügen Sie z-index:-9999;dieser Methode hinzu, oder sie deckt Ihre obere Leiste ab, wenn Sie haben 1.

Sie können dies tun, indem Sie den Seiteninhalt in ein div mit dem folgenden angewendeten ID-Stil einschließen:

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

Hat für mich gearbeitet.

Vielleicht möchten Sie dieses Beispiel überprüfen: http://getbootstrap.com/2.3.2/examples/sticky-footer.html