Bootstrap et position fixed

L'auteur de ce sujet a trouvé une solution à son problème.
Staff
Auteur du sujet

Hello,

Je viens vers vous pour un problème avec Bootstrap sur un élément fixed.

J'ai une structure de page très simple :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="container">
    <div class="row">
        <div class="col-md-8 bleu">
            Une colonne de largeur 8 suivie de plein de br
        </div>
        <div class="col-md-4 vert">
            Une colonne de largeur 4
            <div class="sidebar rouge">
                Une dix fixée
            </div>
        </div>
    </div>
</div>

Et le CSS (hors classes couleur)

1
2
3
.sidebar {
    position: fixed;
}

Le rendu actuel est le suivant :

Question : Comment dire à la div rouge (fixed) de prendre toute la largeur disponible (vert) sachant que c'est une colonne fluide de Bootstrap (la largeur peut varier) ?

Merci :)

Llama ◦ FAQ PHPTuto WAMP

+0 -0

Je me permet de répondre mais je suis pas sûr de répondre à ta question :p Moi j'aurais procédé comme ça :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div class="container">
    <div class="row">
        <div class="col-md-6 bleu">
            Une colonne de largeur 6 suivie de plein de br
        </div>
        <div class="row">
           <div class="col-md-6">
               <div class="row">
                  <div class="col-md-12 vert"></div>
                  <div class="col-md-12 rouge">
                       <div class="sidebar rouge">
                          Ta sidebar rouge
                       </div>
                  </div>
               </div>
           </div>
       </div>
   </div>
</div>

De cette manière tu gères mieux le comportement et tu peux très bien mettre une div en fixed à l'intérieur. Ta div rouge prendra du coup bien toute la largeur souhaitée.

Édité par Moufle

+0 -0
Staff
Auteur du sujet

2 col md-12 dans une row ? Ca ne semble pas trop Bootstrap compliant :)

En fait je gère ça avec une solution plus facile. Vu que c'est juste pour de l'ux, je hère ça en javascript. Et si le javascript est désactivé, pas de problème, il faut juste scroller à la mano pour voir la div.

Llama ◦ FAQ PHPTuto WAMP

+0 -0
Staff

Bootstrap accepte tout (et n'importe quoi, après tout c'est Bootstrap). ;)

Sinon tu aurais pu dimensionner ton élément à la main en CSS avec les bons breakpoints (à coup de calc et de vw éventuellement)…


<troll>Bootstrap c'est caca !</troll>

Édité par viki53

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte