Wie lösche ich eine Fußzeile in Twitter Bootstrap nach unten?

Fußzeilen-Flushing in Twitter Bootstrap

Das Flushing einer Fußzeile am Ende einer Seite ist eine häufige Aufgabe im Webdesign. Dies zu erreichen kann jedoch eine Herausforderung sein, wenn reaktionsfähige Frameworks wie Twitter Bootstrap verwendet werden.

Verstehen des Problems

Die reaktionsfähige Natur von Bootstrap kann herkömmliche Methoden zum Löschen von Fußzeilen beeinträchtigen, die häufig darauf angewiesen sind auf festen Höhen oder unteren Rändern. Daher bleibt die Fußzeile bei unterschiedlichen Bildschirmgrößen möglicherweise nicht immer am unteren Rand der Seite.

Behebung des Problems in Bootstrap 2.2.1 und höher

Bootstrap Enthält jetzt eine integrierte Lösung zum Leeren der Fußzeile, die Navbar-Komponente. Um es zu verwenden, fügen Sie einfach die Klasse „.navbar-fixed-bottom“ zur Navigationsleiste hinzu:

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

Bootstrap 3.x und 4.x

Für Für Bootstrap 3.x und 4.x gilt der gleiche Ansatz. Verwenden Sie die Navbar-Komponente mit der Klasse „.fixed-bottom“:

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

Um sicherzustellen, dass der Seiteninhalt nicht verdeckt wird, denken Sie daran, die folgende CSS-Regel hinzuzufügen:

body {
  padding-bottom: 70px;
}

Fazit

Diese Methoden bieten eine effektive Möglichkeit, die Fußzeile in Bootstrap am Ende der Seite zu platzieren. Mithilfe der integrierten Navigationsleistenkomponente können Sie ansprechende und konsistente Fußzeilenlayouts erstellen.

Das obige ist der detaillierte Inhalt vonWie lösche ich eine Fußzeile in Twitter Bootstrap nach unten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!