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

Nutzen Sie die in Bootstrap 4 integrierten Flex-Utilities! Hier ist, was ich habe mit meist Bootstrap 4 Dienstprogramme kommen.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>

• .d-flex um das Haupt-Div zu einem Flex-Container zu machen
• .flex-column auf dem Haupt-Div, um Ihre Flex-Elemente in einer Spalte anzuordnen
• min-height: 100vh zum Haupt-Div, entweder mit einem Style-Attribut oder in Ihrem CSS, um das Viewport vertikal zu füllen
• .flex-grow-1 auf das Container-Element, damit der Hauptcontainer den gesamten in der Höhe des Ansichtsfensters verbleibenden Platz einnimmt.

Answer 2

Viel einfacheres offizielles Beispiel: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

Answer 3

Behalten Sie die Fußzeile am unteren Rand, indem Sie Bootstrap 5 verwenden

    <div class="min-vh-100 d-flex flex-column 
                justify-content-between">

         <div> <!-- Wrapper (Without footer) -->

            <header>
             I am a header.
            </header>

            <article>
            I am an article!
            </article>

        </div> <!-- End: Wrapper (Without footer) -->

         <footer>
         I am a footer.
         </footer>

    </div>

---

Live-Demo in CodePen

---

Hinweis

• Achten Sie darauf, dass Sie alles in ein <div> oder jedes andere Block-Level-Element mit den folgenden Bootstrap-Klassen: min-vh-100, d-flex,flex-column,justify-content-between .

• Stellen Sie sicher, dass Sie alles außer dem Fußzeilenelement in eine <div> oder jedes andere Element auf Blockebene.

• Stellen Sie sicher, dass Sie <footer> oder ein anderes Element auf Blockebene, um die Fußzeile einzuschließen.

Code Erläuterung

• min-vh-100 stellt sicher, dass das Body-Element mindestens auf die volle Höhe des Bildschirms gestreckt wird

• flex-column behält das Verhalten des normalen Dokumentflusses in Bezug auf die Beibehaltung von gestapelten Blockelementen bei (wobei davon ausgegangen wird, dass alle direkten Kinder des Körpers tatsächlich Blockelemente sind).

• justify-content-between schiebt die Fußzeile an den unteren Rand des Bildschirms.

---

Sehen Sie sich an, wie Sie das Gleiche tun können (wobei die Fußzeile unten bleibt), nur mit CSS - Link

Answer 4

In der neueste Version von Bootstrap 4.3, kann dies mit .fixed-bottom Klasse.

<div class="fixed-bottom"></div>

So verwende ich es mit der Fußzeile:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Weitere Informationen finden Sie in der Position Dokumentation ici .

Answer 5

Nun, ich fand eine Mischung aus navbar-inner et navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Es scheint gut zu sein und funktioniert für mich

Siehe Beispiel in <strong><a href="http://jsfiddle.net/SAWsA/699/" rel="noreferrer">Fiddle</a></strong>