Maison > interface Web > tutoriel CSS > Pourquoi ma barre de navigation Bootstrap disparaît-elle sur les appareils plus petits ?

Pourquoi ma barre de navigation Bootstrap disparaît-elle sur les appareils plus petits ?

Susan Sarandon
Libérer: 2024-11-06 16:26:03
original
644 Les gens l'ont consulté

Why Does My Bootstrap Navbar Disappear on Smaller Devices?

Barre de navigation Bootstrap : éléments disparaissant sur les appareils plus petits

Vous avez conçu une barre de navigation Bootstrap avec un logo bien centré, mais elle disparaît lorsque le la taille de l’écran diminue. Le menu des hamburgers reste également masqué. Ce problème peut être résolu en considérant plusieurs facteurs.

Apparence de la barre de navigation sur les appareils mobiles

Bootstrap s'appuie sur les requêtes multimédias pour ajuster le comportement de la barre de navigation pour différentes tailles d'écran. Les classes CSS suivantes jouent un rôle crucial :

navbar-default (or navbar-light for Bootstrap 4+)
navbar-dark
Copier après la connexion

Application de la classe Navbar

Pour garantir un affichage correct sur les appareils mobiles, appliquez la classe navbar appropriée à votre code :

<nav>
Copier après la connexion

Vous pouvez également ajouter une couleur d'arrière-plan personnalisée à la barre de navigation ou assombrir le bouton bascule :

#navbar-primary .navbar-nav { 
   background: #ededed;
}

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal