Heim > Web-Frontend > CSS-Tutorial > Wie füge ich in Twitter Bootstrap eine Fußzeile an das Ende der Seite ein?

Wie füge ich in Twitter Bootstrap eine Fußzeile an das Ende der Seite ein?

DDD
Freigeben: 2024-11-28 17:01:14
Original
680 Leute haben es durchsucht

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

Fußzeile mit Twitter Bootstrap an den Seitenende spülen

Eine Fußzeile mithilfe von CSS an den Seitenende zu spülen, ist eine gängige Technik. Allerdings treten beim Versuch, diesen Ansatz mit Twitter Bootstrap anzuwenden, aufgrund seiner reaktionsfähigen Natur Schwierigkeiten auf.

In früheren Versionen von Bootstrap war das Verschieben der Fußzeile nach unten nicht enthalten. In Bootstrap 2.2.1 und höher ist diese Funktion jedoch verfügbar.

Bootstrap 3.x

Um die Fußzeile in Bootstrap 3.x zu leeren, verwenden Sie die Navigationsleiste Komponente und fügen Sie die Klasse .navbar-fixed-bottom hinzu. Dadurch wird die Fußzeile unabhängig von der Seitenhöhe am unteren Rand der Seite fixiert.

<div class="navbar navbar-fixed-bottom"></div>
Nach dem Login kopieren

Bootstrap 4.x

In Bootstrap 4.x wird die Die Syntax hat sich leicht geändert. Um die Fußzeile unten zu fixieren, verwenden Sie den folgenden Code:

<div class="navbar fixed-bottom"></div>
Nach dem Login kopieren

Um zu verhindern, dass der Seiteninhalt verdeckt wird, fügen Sie body { padding-bottom: 70px; } oder eine ähnliche Stilregel.

Das obige ist der detaillierte Inhalt vonWie füge ich in Twitter Bootstrap eine Fußzeile an das Ende der Seite ein?. 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage