web-dev-qa-db-fra.com

div fixe à l'intérieur bootstrap colonne

J'essaie de créer une mise en page réactive à deux colonnes à l'aide de bootstrap, dans la colonne de gauche, je voudrais placer un menu et à droite une galerie d'images. J'aimerais que le menu reste fixe tout en faisant défiler les images à droite.

La difficulté est que je veux que le menu fixe soit fluide avec la disposition bootstrap. Donc, même si je ne veux pas qu'il se déplace de haut en bas lors du défilement, je veux qu'il se repositionne lors du redimensionnement l'écran.

Ce site Web est un exemple de ce que je veux dire: http://www.galeriebertrand.com/artists

Je n'arrive pas à comprendre comment cela a été fait sur ce site, il ne semble pas que la colonne de gauche ait un positionnement fixe.

htmlcsstwitter-bootstrapcss-positionmultiple-columns
20
fred

Vous devrez utiliser des requêtes multimédias pour définir la barre latérale sur position: fixed Alors que la largeur de l'écran est large.

Voici un exemple: http://jsfiddle.net/hajpoj/Q7A33/1/

HTML:

<div class="row">
    <div class="col-sm-4 sidebar-outer">
        <div class="sidebar">/* fixed sidebar */
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content"> /*fluid content */
        </div>
    </div>
</div>

CSS:

.sidebar-outer {
    position: relative;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}

Fondamentalement, dans cet exemple, les colonnes sont empilées à une largeur de 768 pixels (ou des "petites" largeurs de démarrage). Si vous vouliez qu'il soit empilé à une largeur différente comme la largeur "moyenne" du bootstrap (992px), vous voudrez changer col-sm-4, col-sm-8 En col-md-4, col-md-8 Et changer @media (min-width: 768px) to @media (min-width 992px)

17
hajpoj

Utilisez-vous Bootstrap 2.x ou 3? Je crois que ce que vous recherchez est la classe d'affixe. Voir les liens ci-dessous:

Bootstrap 2.x: http://getbootstrap.com/2.3.2/javascript.html#affix

Bootstrap 3: http://getbootstrap.com/javascript/#affix

13
guydog28