Flushing Fußzeile an den unteren Rand der Seite, Twitter Bootstrap

Question

Ich bin im Allgemeinen mit der Technik des Spülens einer Fußzeile mit CSS vertraut.

Aber ich habe einige Schwierigkeiten, diesen Ansatz für Twitter-Bootstrap, wahrscheinlich aufgrund der Tatsache, dass Twitter-Bootstrap ist in der Natur reagieren zu arbeiten. Mit Twitter Bootstrap bin ich nicht in der Lage, die Fußzeile an den unteren Rand der Seite mit dem Ansatz in der obigen Blog-Post beschrieben bündig zu bekommen.

Answer 1

Getestet mit Bootstrap 3.6.6 .

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

Answer 2

Verwenden Sie dieses Stück Code in Bootstrap ist es funktioniert

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>

Answer 3

Das Einzige, was bei mir funktioniert hat:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

Answer 4

Hier ist eine Lösung für die neueste Version von Bootstrap (4.3 zum Zeitpunkt des Schreibens) mit Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

Und ein Codepen-Beispiel: https://codepen.io/tillytoby/pen/QPdomR

Answer 5

Halten Sie es einfach.

footer {
  bottom: 0;
  position: absolute;
}

Möglicherweise müssen Sie auch die Höhe der Fußzeile ausgleichen, indem Sie ein margin-bottom entsprechend der Höhe der Fußzeile zum body .