La barre de navigation est un composant d'application important. Il fournit à l'utilisateur les noms de différentes sections d'application intégrées avec leurs liens. L'utilisateur sera dirigé vers cette partie en cliquant sur ces liens de section. Bootstrap fournit de nombreuses classes pour créer la barre de navigation. Plus précisément, certaines classes de bootstrap aident à ajuster la position de Navbar.

Cet article expliquera comment faire en sorte que la barre de navigation fixe supérieure ne s'étire pas dans le conteneur.

Comment faire une barre de navigation fixe supérieure?

Le "toit fixe"La classe est utilisée pour faire fixer la barre navale en haut de la fenêtre. Il a un CSS prédéfini "position«Propriété avec la valeur»fixé"Avec d'autres propriétés.

Exemple

Implémentez le «toit fixe«Classe à la barre navale et voir son effet:

• Tout d'abord, ajoutez un "
• Incluez le logo en utilisant le «marque de navigation" classe.
• Ensuite, ajoutez le "»Élément pour créer un bouton. Cela s'affiche sur l'écran lorsque l'écran est réduit signifie que tous les éléments seront effondrés, ce qui est appliqué à l'aide du "data-toggle"Attribut avec la valeur"effondrement". En cliquant sur le bouton, les éléments Navbar seront affichés comme un menu.
• Spécifie le "”Élément avec le"effondrement" et "Navbar-Collapse" Des classes.
• Ajouter les éléments Navbar sous la forme d'une liste non ordonnée.
• Ensuite, faites la barre de recherche en utilisant le «" élément.

Html

Jusqu'à présent, nous avons créé une barre de navigation. Maintenant, ajoutons du contenu à la page Web:

Bienvenue à Linuxhint

Linuxhint fournit les meilleurs articles et vidéos de qualité.

Voir plus

Vous pouvez observer à partir de la position de la barre de navigation ci-dessous, la position de la barre de navigation est fixée dans le haut de la fenêtre:

D'après le GIF ci-dessous, on peut voir que, en augmentant ou en diminuant la taille de l'écran, la barre de navigation s'étire en conséquence:

La section ci-dessous montrera comment faire en sorte que la barre Navar fixe supérieure reste dans le conteneur et ne s'étire pas à l'aide d'exemples pratiques.

Comment faire en sorte que la barre de navigation fixe supérieure ne s'étire pas du conteneur?

Sangles de botte "récipient»La classe offre un conteneur à largeur fixe réactif. Cette classe aide la barre navale à rester dans un conteneur et évite son étirement.

Exemple

Attribuez le «récipient«Classe au«