Bootstrap 4 - Sprungmarken bei TOP Naviation (fix)

[Reto]

Hallo,

ich bin ein Fan von Bootstrap. In der alten Version 3.X (mit fixer Navbar)war der Einbau von Sprungmarken wirklich einfach. Es gab einen kleinen CSS Code er entsprechend helfen konnte:

	section {
		padding-top:80px;
		margin-top:-80px;
	}	

Das scheint jetzt nicht mehr zu funktionieren. Gibt es andere Lösungen ?

[Matthias Apsel]

Hallo Reto,

CSS-Code ist ohne HTML, das er beeinflussen soll, sinnfrei.

Alle diese Tricks laufen auf die Kombination von padding und margin hinaus.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Reto

ich bin ein Fan von Bootstrap.

Igitt. Ich bin ein Fan von einfachen Lösungen. Fürs Layouten: CSS.

Hab gestern in einem Vortrag Bootstrap und Grid verglichen. Abgesehen davon, dass mit Bootstrap vieles gar nicht möglich ist:

In der alten Version 3.X (mit fixer Navbar)war der Einbau von Sprungmarken wirklich einfach. Es gab einen kleinen CSS Code er entsprechend helfen konnte:

	section {
		padding-top:80px;
		margin-top:-80px;
	}	

Kann kann nur helfen, wenn die Navbar maximal 80 Pixel hoch ist. Also nicht, da man i.A. nicht wissen kann, wie hoch die Navbar wirklich ist.

Das scheint jetzt nicht mehr zu funktionieren. Gibt es andere Lösungen ?

Ja, mit JavaScript.

LLAP 🖖

[Rolf B]

Hallo Reto,

Gibt es andere Lösungen ?

ja. Mit JavaScript kannst Du die position:fixed Version retten.

Alternativ die navbar nicht mit position:fixed fixieren, sondern per CSS dafür sorgen dass Navbar und Inhalt sich nicht überlappen und nur der Inhalt gescrollt wird (Fullscreen-Layout).

Wie Du das nun umsetzt ist deine Sache; es geht antik mit position:absolute Elementen, mittelalterlich mit Flexbox und aktuell mit Grid (und prähistorisch mit table-Layout... 😀).

Ob das mit dem Stiefelriemen vereinbar ist, weiß ich allerdings nicht.

Rolf