Comment créer une navigation dans la barre latérale fixe dans une mise en page Twitter Bootstrap 2.0 fluide ?

Création d'une navigation dans la barre latérale fixe dans Fluid Twitter Bootstrap 2.0

Dans une mise en page Bootstrap 2.0 fluide, maintenir une navigation dans la barre latérale fixe pendant le défilement peut être atteint. Voici comment procéder :

1. Créer une classe de barre latérale personnalisée :
   Définissez une classe CSS pour la barre latérale fixe, telle que .sidebar-nav-fixed. Attribuez-lui des propriétés telles que position : fixe, haut et largeur.
2. Créez une classe de contenu décalé :
   Pour compenser la marge gauche créée par la barre latérale fixe, ajoutez une classe de décalage au contenu div. Par exemple, .row-fluid > .span-fixed-sidebar peut avoir une propriété margin-left égale à la largeur de la barre latérale fixe.

3. CSS mis à jour :

   .sidebar-nav-fixed {
       padding: 9px 0;
       position: fixed;
       left: 20px;
       top: 60px;
       width: 250px;
   }
   
   .row-fluid > .span-fixed-sidebar {
       margin-left: 290px;
   }

   Copier après la connexion

4. Modifications réactives :
   Pour vous adapter aux différentes tailles d'écran, pensez à utiliser des médias requêtes. Par exemple :

   @media (max-width: 979px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

   Copier après la connexion

5. Méthode supplémentaire pour l'affichage mobile :
   Pour conserver une barre latérale fixe jusqu'à ce qu'elle devienne statique pour les petits écrans, ajustez le CSS comme suit :

   @media (max-width: 767px) {
       .sidebar-nav-fixed {
           position: static;
           width: auto;
       }
   }

   Copier après la connexion

Remarque : Pour les versions Bootstrap version ultérieure à 2.0.4, envisagez d'utiliser le plugin Affix jQuery, qui fournit des fonctionnalités similaires.

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!