bootstrap affix responsive

Bonjour,

J'ai besoin de fixer ma colonne de droite en haut, et avec ce code cela fonctionne bien :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<div class="container-fluid"> <div class="row"> <div class="col-sm-6"> <h1>Partie Gauche</h1> @for (int i = 0; i < 50; i++) { <h6>ligne @i</h6>} </div> <div class="col-sm-6"> <div class="affix"> <h1>Partie droite fixe</h1> </div> </div> </div> </div>

---

Mais lorsque l'écran ce réduit la colonne de droite disparaît totalement.
En supprimant la class affix, elle apparaît bien en dessous de la colonne de gauche sur un petit écran mais n'est plus fixe sur un grand écran.

Comment concilier les deux comportements suivant la dimension de l'écran ?
Merci d'avance

Est-ce qu'avec un media queries, cela ne pourrait pas se rêgler?

Sur mon petit bout de code exemple, tu les mettrais en place comment JefReb les media queries ?
Merci

Bonjour,

1/ tu utilises déjà Bootstrap.

class="col-sm-6" : change les valeurs selon les largeurs de media, pour modifier la mise en page (largeurs des colonnes,...)

• Grid system (voir : Grid options)

2/ Par contre, ça ne règle pas le problème de fixe/pas fixe.
Là, il faut ajouter du CSS.

Code:

---

1 2 3

@media screen and (min-width:768px) { /* à adapter */ .affix { position:fixed; } }

---