Une barre latérale fixe peut-elle être implémentée dans une mise en page Fluid Bootstrap 2.0 ?

Maintenir une barre latérale fixe dans la mise en page Fluid Bootstrap 2.0

Problème : Est-il possible de conserver la navigation dans la barre latérale fixe dans des mises en page fluides lors du défilement ?

Solution : Oui, c'est possible. Voici comment procéder :

1. Créer une classe fixe pour la barre latérale :

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

2. Appliquer un décalage classe au div de contenu :

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

Ce CSS garantit que la barre latérale reste fixe pendant le défilement et ajuste la zone de contenu pour compenser la largeur de la barre latérale.

Solution raffinée :

• Mise à jour :Pour prendre en charge la mise en page réactive de Bootstrap, la démo a été mise à jour avec le CSS suivant :

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

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

• Approche alternative : Pour conserver la barre latérale fixe jusqu'à ce que la mise en page passe en vue mobile :

.sidebar-nav-fixed {
    position: fixed;
    top: 60px;
    width: 21.97%;
}

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

@media (max-width: 979px) {
    .sidebar-nav-fixed {
        top: 70px;
    }
}

Remarque : Bootstrap 2.0. 4 et les versions antérieures ne disposent pas du plugin Affix jQuery, qui fournit des fonctionnalités avancées pour corriger les éléments de la barre latérale. Cette solution s'applique uniquement aux versions antérieures de Bootstrap.

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!