div fixe à l'intérieur de la colonne bootstrap
j'essaie de faire une mise en page répondant à deux colonnes en utilisant bootstrap, dans la colonne de gauche je voudrais placer un menu, et dans la droite une galerie d'image. Je voudrais que le menu reste fixe tout en parcourant 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 bouge de haut en bas lors du scrolling, je veux qu'il se repositionne lors du redimensionnement de l'écran.
Ce site 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.
2 réponses
vous devrez utiliser les requêtes des Médias pour définir la barre latérale comme 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 à 768px de large (ou bootstraps "petite" largeur). Si vous voulez qu'il soit empilé à une largeur différente comme la largeur "moyenne" de bootstrap (992px) vous voudrez changement col-sm-4, col-sm-8col-md-4, col-md-8 et changez @media (min-width: 768px) to @media (min-width 992px)
utilisez-vous Bootstrap 2?x ou 3? Je crois que ce que vous cherchez est l'affixe de classe. Voir les liens ci-dessous:
Bootstrap 2.x:http://getbootstrap.com/2.3.2/javascript.html#affix
Bootstrap 3: http://getbootstrap.com/javascript/#affix