Barre de navigation Bootstrap : Pourquoi mon logo et mes éléments de menu disparaissent-ils sur les petits appareils ?

Barre de navigation Bootstrap : remédier aux éléments qui disparaissent sur des appareils plus petits

Lors de la conception d'une barre de navigation Bootstrap avec un logo central et des éléments de menu, il est crucial de s'assurer affichage optimal sur tous les appareils. Cependant, les utilisateurs peuvent rencontrer un problème où tous les éléments, y compris le logo et le menu hamburger, disparaissent sur des écrans plus petits.

La raison sous-jacente de cet acte de disparition est souvent liée à la classe navbar-default appliquée à la barre de navigation dans versions antérieures de Bootstrap. Bien que cela ne soit pas immédiatement apparent, cette classe est essentielle pour définir la couleur d'arrière-plan et rendre visible l'icône du hamburger.

Solution 1 : Bootstrap 5 et Modern Bootstrap

Dans Bootstrap 5 et les versions modernes, la classe navbar-default a été remplacée. Pour faire apparaître l'icône du hamburger, vous devez ajouter la classe navbar-light ou navbar-dark à votre élément navbar. Par exemple :

<nav>

Solution 2 : Ajout d'une couleur d'arrière-plan (Bootstrap 4 et versions antérieures)

Si vous utilisez Bootstrap 4 ou version antérieure, vous pouvez résoudre résoudre le problème en ajoutant une couleur d'arrière-plan à l'élément navbar-nav :

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

Solution 3 : Assombrir le basculeur (Bootstrap 4 et versions antérieures)

Une autre option pour Bootstrap 4 et versions antérieures consistent à assombrir l'icône de bascule en modifiant la classe .icon-bar :

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

Remarque supplémentaire pour Bootstrap 3 :

Pour Bootstrap 3, la classe navbar-default doit être incluse pour que les éléments de menu soient correctement alignés.

En implémentant l'une de ces solutions, vous pouvez vous assurer que votre barre de navigation Bootstrap s'affiche comme prévu sur toutes les tailles d'écran, quel que soit l'appareil utilisé. utilisé.

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!