Pasek nawigacyjny jest ważnym elementem aplikacji. Zapewnia użytkownikowi nazwy różnych sekcji aplikacji osadzonych w ich linkach. Użytkownik zostanie skierowany do tej części, klikając te linki do sekcji. Bootstrap zapewnia wiele klas do tworzenia paska nawigacyjnego. Mówiąc dokładniej, niektóre klasy bootstrap pomagają dostosować pozycję Navbar.

Ten zapis wyjaśni, jak sprawić, by najlepszy stały pasek nava nie rozciągał się z pojemnika.

Jak zrobić najlepszy stały pasek nawigacyjny?

„„stały top„Klasa jest wykorzystywana do ustalania paska NAV u góry rzutni. Ma predefiniowany CSS "pozycja„Własność o wartości”naprawił”Z niektórymi innymi właściwościami.

Przykład

Wdrożyćmy „stały top„Klasa do Navbar i zobacz jego efekt:

• Najpierw dodaj „
• Dołącz logo za pomocą „Brand Navbar" klasa.
• Następnie dodaj „„Element do utworzenia przycisku. Będzie to wyświetlone na ekranie, gdy ekran zostanie zmniejszony, oznacza, że ​​wszystkie elementy zostaną zwinięte, które są stosowane za pomocą „Data-toggle”Atrybut z wartością„zawalić się". Po kliknięciu przycisku elementy BARBAR będą wyświetlane jak menu.
• Określić "„Element z„zawalić się" I "NOVBAR-COCLASSE„Zajęcia.
• Dodaj elementy navbar w postaci nieuporządkowanej listy.
• Następnie zrób pasek wyszukiwania za pomocą „" element.

Html

Do tej pory stworzyliśmy pasek nawigacyjny. Teraz dodajmy trochę treści na stronie internetowej:

Witamy w Linuxhint

Linuxhint zapewnia najlepszą jakość artykułów i filmów.

Zobacz więcej

Możesz obserwować z poniższego GIF, pozycja paska nawigacyjnego jest ustalona na szczycie rzutni:

Z poniższego GIF można zauważyć, że po zwiększeniu lub zmniejszeniu rozmiaru ekranu pasek nawigacyjny rozciąga się odpowiednio:

Poniższa sekcja pokaże, jak sprawić, by najlepszy stały pasek nawigacyjny pozostał w pojemniku i nie rozciągnąć za pomocą praktycznych przykładów.

Jak sprawić, by najlepszy stał?

Bootstrap „pojemnik”Klasa oferuje responsywny kontener o stałej szerokości. Ta klasa pomaga Navbarowi pozostać w pojemniku i uniknie jego rozciągania.

Przykład

Przypisz „pojemnik„Klasa do„