Comment réparer la navigation dans la barre latérale dans Fluid Twitter Bootstrap 2.0 ?

Corriger la navigation dans la barre latérale dans Fluid Twitter Bootstrap 2.0

Obtenir une navigation dans la barre latérale qui reste stationnaire lors du défilement dans une mise en page fluide est simple.

Mise en œuvre

CSS

Définissez une nouvelle classe sidebar-nav-fixed pour réparer votre barre latérale et ajoutez une classe de décalage à votre div de contenu pour compenser la marge gauche :

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

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

Option mise à jour

Pour une compatibilité réactive, considérez 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;
    }
}

HTML

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

Notez qu'il y a une largeur mineure différence dans la barre latérale fixe car elle n'hérite pas de la largeur du div du conteneur.

Méthode alternative

Pour garder la barre latérale fixe jusqu'à ce que la grille tombe pour la vue mobile, utilisez ce CSS :

.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;
    }
}

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!