Désactivez la réactivité de Bootstrap en fixant la largeur du conteneur et en utilisant le premier niveau du système de grille. Lisez la documentation pour plus d'informations.
Notez l'absence du <meta name="viewport" content="width=device-width, initial-scale=1">, qui désactive l'aspect zoom des sites dans les appareils mobiles. De plus, nous avons réinitialisé la largeur de notre conteneur et modifié la barre de navigation pour éviter l'effondrement, et nous sommes fondamentalement prêts à partir.
En guise d'avertissement, le composant de la barre de navigation est plutôt délicat ici dans la mesure où les styles d'affichage sont plutôt spécifiques et détaillés. Remplacements pour s'assurer que l'affichage des styles de bureau n'est pas aussi performant ou élégant qu'on le souhaiterait. Sachez simplement qu'il peut y avoir des pièges potentiels lorsque vous construisez sur cet exemple lorsque vous utilisez la barre de navigation.
Les mises en page non réactives mettent en évidence un inconvénient majeur des éléments fixes. Tout composant fixe, tel qu'une barre de navigation fixe, ne pourra pas défiler lorsque la fenêtre d'affichage devient plus étroite que le contenu de la page. En d'autres termes, compte tenu de la largeur du conteneur non réactif de 970 pixels et d'une fenêtre d'affichage de 800 pixels, vous masquerez potentiellement 170 pixels de contenu.
Il n'y a pas moyen de contourner cela car c'est le comportement par défaut du navigateur. La seule solution est une mise en page réactive ou l'utilisation d'un élément non fixe.