Heim > Web-Frontend > CSS-Tutorial > Wie lösche ich eine Fußzeile in Twitter Bootstrap nach unten?

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

Barbara Streisand
Freigeben: 2024-12-07 12:42:12
Original
435 Leute haben es durchsucht

How to Flush a Footer to the Bottom in Twitter Bootstrap?

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

body {
  padding-bottom: 70px;
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage