Navigasjonslinjen er en viktig applikasjonskomponent. Det gir brukeren navnene på forskjellige applikasjonsseksjoner innebygd med lenkene sine. Brukeren vil bli rettet mot den delen ved å klikke på disse seksjonskoblingene. Bootstrap gir mange klasser for å lage navigasjonslinjen. Mer spesifikt er det noen bootstrap -klasser med å justere Navbars posisjon.

Denne oppskrivningen vil forklare hvordan du får den øverste faste navbaren til ikke å strekke seg ut av beholderen.

Hvordan lage en topp fast navbar?

“Fast-topp”Klasse brukes til å gjøre Navbar fikset øverst i Viewport. Den har en forhåndsdefinert CSS “posisjon”Eiendom med verdien”fikset”Med noen andre egenskaper.

Eksempel

La oss implementere “Fast-topp”Klasse til navbaren og se dens virkning:

• Først, legg til en "
• Inkluder logoen ved å bruke “Navbar-merke”Klasse.
• Deretter legger du til “”Element for å opprette en knapp. Dette vises på skjermen når skjermen reduseres betyr at alle elementene blir kollapset som brukes ved å bruke "Data-toggle”Attributt med verdien”kollapse”. Når du klikker på knappen, vises Navbar -elementene som en meny.
• Spesifiser “”Element med“kollapse”Og“Navbar-Collaps”Klasser.
• Legg til Navbar -elementene i form av en uordnet liste.
• Deretter må du gjøre søkefeltet ved å bruke "”Element.

Html

Så langt har vi laget en navigasjonslinje. La oss nå legge til litt innhold på websiden:

Velkommen til Linuxhint

Linuxhint gir artikler og videoer av beste kvalitet.

Se mer

Du kan observere fra nedenfor GIF Navigasjonslinjens posisjon er festet på Viewports topp:

Fra GIF nedenfor kan det sees at navigasjonslinjen ved å øke eller redusere skjermstørrelsen strekker seg deretter:

Avsnittet nedenfor vil demonstrere hvordan du kan få det øverste faste Navbar til å bli i beholderen og ikke strekke seg ved hjelp av praktiske eksempler.

Hvordan lage topp faste navbarer ikke strekke seg ut av beholderen?

Bootstrap's “container”Klassen tilbyr en responsiv container for fast bredde. Denne klassen hjelper Navbar til å holde seg i en beholder og unngår strekkingen.

Eksempel

Tilordne “container”Klasse til“