Bootstrap 4: Wie lässt sich die oberste feste Navigationsleiste im Container bleiben und nicht dehnen?

Es gibt viele Möglichkeiten, eine feste Navigationsleiste im divContainer eines Elternteils zu belassen . Wir werden hier das einfachste durchgehen.

Stellen Sie sich vor, Sie haben den folgenden Code, der geringfügig von den Bootstrap-Dokumenten geändert wurde:

Navbar  
  • Home (current)
  • Link
  • Link
hello
div.next { background-color: lightblue; width: 100%; height: 60rem; }

Und Ihre Seite sieht so aus:

Lösungen

Während in den Dokumenten "Navigationsleisten und deren Inhalt sind standardmäßig flüssig. Verwenden Sie optionale Container, um ihre horizontale Breite zu begrenzen" gelesen wird, besteht die einfachste Lösung darin, die Breite der Navigationsleiste mithilfe von CSS direkt festzulegen:

div.next { background-color: lightblue; width: 100%; height: 60rem; } .container { padding: 0px; } nav.navbar { width: inherit; top: 0%; left: 50%; transform: translateX(-50%); }

Durch Hinzufügen von Regeln für .containerund nav.navbarhat Ihre Navigationsleiste jetzt dieselbe Breite wie der Container des übergeordneten Elements: