La barra di navigazione è un importante componente dell'applicazione. Fornisce all'utente i nomi di diverse sezioni dell'applicazione incorporate con i loro collegamenti. L'utente verrà indirizzato a quella parte facendo clic su questi collegamenti di sezione. Bootstrap fornisce molte classi per creare la barra di navigazione. Più specificamente, alcune classi bootstrap aiutano a regolare la posizione della navigazione.

Questo articolo spiegherà come rendere la barra di navigazione fissa superiore non allungarsi dal contenitore.

Come realizzare una barra di navigazione fissa superiore?

IL "top fisso"La classe viene utilizzata per far correre la barra navy nella parte superiore del vista. Ha un CSS predefinito "posizione"Proprietà con il valore"fisso"Con alcune altre proprietà.

Esempio

Implementiamo il "top fisso"Classe per la barra navalmente e vedere il suo effetto:

• Innanzitutto, aggiungi un "
• Includere il logo usando il “Navbar-brand" classe.
• Quindi, aggiungi il ""Elemento per creare un pulsante. Questo verrà visualizzato sullo schermo quando lo schermo è ridotto significa che tutti gli elementi verranno crollati che vengono applicati usando "Data-Toggle"Attributo con il valore"crollo". Facendo clic sul pulsante, gli elementi Navbar verranno visualizzati come un menu.
• Specificare la ""Elemento con il"crollo" E "Navbar-Collapse" classi.
• Aggiungi gli elementi NAVBAR sotto forma di un elenco non ordinato.
• Quindi, fai la barra di ricerca usando ""Elemento.

Html

Finora abbiamo creato una barra di navigazione. Ora, aggiungiamo alcuni contenuti alla pagina Web:

Benvenuti in Linuxhint

Linuxhint offre i migliori articoli e video di qualità.

Visualizza di più

È possibile osservare dalla gif di seguito la posizione della barra di navigazione è fissata nella parte superiore del vista:

Dalla gif seguente, si può vedere che, aumentando o diminuendo le dimensioni dello schermo, la barra di navigazione si sta allungando di conseguenza:

La sezione seguente dimostrerà come fare la barra di navigazione fissa superiore nel contenitore e non allungare con l'aiuto di esempi pratici.

Come fare la barra navar fissa superiore non allungare il contenitore?

Bootstrap "contenitore"La classe offre un contenitore reattivo a larghezza fissa. Questa classe aiuta la barra di navigazione a rimanere in un contenitore ed evita il suo allungamento.

Esempio

Assegna il "contenitore”Classe per la"