Comment garder la barre latérale fixe lors du défilement dans Fluid Bootstrap 2.0 ?

Garder la barre latérale fixe lors du défilement dans Fluid Bootstrap 2.0

Pour une mise en page fluide, il est possible de corriger la navigation dans la barre latérale lors du défilement en implémentant une classe personnalisée.

CSS personnalisé

Créez une classe .sidebar-nav-fixed pour contrôler les paramètres fixes de la barre latérale positionner et ajouter .row-fluid > .span-fixed-sidebar au conteneur de contenu pour décaler la marge de la barre latérale. Voici le CSS :

.sidebar-nav-fixed {
    padding: 9px 0;
    position:fixed;
    left:20px;
    top:60px;
    width:250px;
}

.row-fluid > .span-fixed-sidebar {
    margin-left: 290px;
}

Structure HTML

Utilisez la structure HTML suivante pour implémenter la barre latérale fixe :

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav sidebar-nav-fixed">
        ...
      </div>
    </div>
    <div class="span9">
      ...
    </div>
  </div>
</div>

Configuration avancée

Pour plus de flexibilité, utilisez des requêtes multimédias CSS pour ajuster la position de la barre latérale en fonction de la taille de l'écran. Voici un exemple :

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

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

Cette configuration maintient la barre latérale fixe jusqu'à ce que la taille de l'écran diminue pour les petits écrans ou la vue mobile.

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!