Discussion :

[shibo]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[JefReb]

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

[shibo]

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

[Invité]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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