Bootstrap 4: Hogyan lehet a legjobban javított navigációs sávot tartani a konténerben és nem nyújtani?

Számos módja van annak, hogy a fix navigációs sáv a szülők divtárolójában maradjon . Itt fogjuk áttekinteni a legegyszerűbbet.

Képzelje el, hogy a következő kód van, kissé módosítva a Bootstrap dokumentumokból:

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

Az Ön oldala így néz ki:

Megoldások

Míg a dokumentumok "Navbárok és tartalmuk alapértelmezés szerint folyékony. Vízszintes szélességük korlátozásához használjon opcionális tárolókat" felirat olvasható, a legegyszerűbb megoldás a CSS használatával közvetlenül beállítani a navigációs sáv szélességét:

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

A szabályok célzása .containerés hozzáadásával nav.navbara navigációs sáv most megegyezik a szülő tárolójának szélességével: