Faire de colonne de la position fixe dans le bootstrap

En utilisant Bootstrap, j'ai une colonne de grille class="col-lg-3" que je veux mettre en position:fixe tandis que l'autre .col-lg-9 est en position normale (mesure de défilement de la page).

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

Exactement de la même manière comme la colonne de gauche dans LifeHacker.com
Vous verrez que la partie de gauche est fixe cependant j'ai faites défiler la page.

J'utilise bootstrap v3.1.1

Je joint le code par demande.
En attente pour le sujet à prendre à l'extérieur "en attente". En attendant, vous pouvez voir ma réponse ici: jsfiddle.net/dRbe4. Je peux expliquer mieux une fois que la question est à nouveau ouvert.

InformationsquelleAutor | 2014-02-19

73
```
<div class="row">
    <div class="col-lg-3">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
       Normal data enter code here
    </div>
</div>
```
- Certainement la meilleure solution maintenant!
- Cela ne fonctionne pas correctement sur les écrans plus petits, le droit div jettera sur la gauche col contenant le fixed div
- bootstrap 4?? toutes les idées
- Dans le Bootstrap 4, changement de 'code' à 'collant-top"
- Pour info: Bootstrap abandonné le support pour apposer avec Bootstrap 4.0. Utiliser la position: collants " maintenant, comme suggéré ici: getbootstrap.com/docs/4.1/migration/#components
- Aussi à l'aide de bootstrap 3. Est-il un moyen de l'avoir à se comporter comme position:collant (où il défile jusqu'à ce que vous atteignez le point)? J'ai une mise en page avec un élément sur toute la largeur de la partie supérieure de l'écran qui défile hors de vue. Si j'utilise apposer pour mon panneau, il laisse une vilaine écart lorsque cet élément est utilisé pour être sur de l'écran.
InformationsquelleAutor Naga prasanna
43

itération sur Ihab de réponse, juste à l'aide de position:fixed et amorce col-offset vous n'avez pas besoin d'être précis sur la largeur.
```
<div class="row">
    <div class="col-lg-3" style="position:fixed">
        Fixed content
    </div>
    <div class="col-lg-9 col-lg-offset-3">
        Normal scrollable content
    </div>
</div>
```
- cela ne fonctionne pas si vous changez la position des colonnes
- C'est une meilleure solution! travail parfait et pas de CSS est nécessaire. @didando8a Si vous modifiez la position des poteaux il suffit de changer le col-lg-décalage d'un nouveau décalage.
- Si quelqu'un a besoin aussi de Défilement de la Capacité de la colonne fixe, il suffit d'ajouter de la hauteur et de débordement. par exemple,style="position:fixed;height:100%;overflow-y:auto;".
- CSS est nécessaire" - ouais, c'est juste dans le style de la balise 😉
- C'est ce dont j'avais besoin! Remarque le décalage classes sont différentes dans le Bootstrap 4, par exemple offset-lg-3. getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
- au lieu de position:fixed balise style, il suffit d'ajouter le affix classe dans BS3 et puis le décalage dans l'autre colonne.
InformationsquelleAutor Pablo Fernandez
31

À la suite de la solution ici http://jsfiddle.net/dRbe4/,
```
<div class="row">
    <div class="col-lg-3 fixed">
        Fixed content
    </div>
    <div class="col-lg-9 scrollit">
        Normal scrollable content
    </div>

 </div>
```
J'ai modifié un peu de css pour travailler tout simplement parfait:
```
.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}
```
Merci @Lowkase pour le partage de la solution.
- Est-il possible d'avoir le même résultat sans spécifier la largeur de l'attribut?
- Je me rends compte de ce qui devrait être douloureusement évident, mais je ne peux pas le faire fonctionner...je veux le défilement de la colonne sur la gauche et la colonne fixe sur la droite. Ma colonne fixe a seulement une étiquette, mais pour une raison que lorsque j'ai mis ces classes, le label "colle" à l'angle supérieur gauche au lieu d'être dans la colonne. J'ai essayé toutes les différentes combinaisons d'attributs de style, en vain. Souhaiterait un pointeur 🙂
- partager Jsfiddle donc je peux vous aider avec le code.
- Merci beaucoup pour l'offre! Pas, cependant, que depuis, j'ai abandonné ce projet.
- j'ai fait la même mais quand je suis en ajoutant les fixes de classe c'est d'obtenir disparu. S'il vous plaît aider.
- Pourquoi ne pas utiliser bs classes de grille pour la largeur?
- Juste se souvenir qu'avec bootstrap 4 il est .sticky-top
InformationsquelleAutor
11

dans le Bootstrap 3 class="affix" fonctionne, mais dans le Bootstrap 4 il ne le fait pas.
J'ai résolu ce problème dans le Bootstrap 4 avec class="sticky-top"
(à l'aide de position: fixed dans le CSS a ses propres problèmes)

code sera quelque chose comme ceci:
```
<div class="row">
    <div class="col-lg-3">
        <div class="sticky-top">
            Fixed content
        </div>
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>
</div>
```
InformationsquelleAutor Mohsen Sahrayi

L'utiliser, fonctionne pour moi et résoudre les problèmes avec petit écran.

<div class="row">
    <!-- (fixed content) JUST VISIBLE IN LG SCREEN -->
    <div class="col-lg-3 device-lg visible-lg">
       <div class="affix">
           fixed position 
        </div>
    </div>
    <div class="col-lg-9">
    <!-- (fixed content) JUST VISIBLE IN NO LG SCREEN -->
    <div class="device-sm visible-sm device-xs visible-xs device-md visible-md ">
       <div>
           NO fixed position
        </div>
    </div>
       Normal data enter code here
    </div>
</div>

InformationsquelleAutor Lucke

4

Mis à jour pour Bootstrap 4

Bootstrap 4 comprend maintenant un position-fixed classe et à cette fin, donc il n'y a pas besoin de CSS...
```
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="position-fixed">
                Fixed content
            </div>
        </div>
        <div class="col-lg-9">
            Normal scrollable content
        </div>
    </div>
</div>
```
https://www.codeply.com/go/yOF9csaptw
- Si je fais comme dans votre exemple, le contenu du "col-lg-3" colonne sort de son parent. Assez étrange! (Essayez de mettre plus de texte dans le présent). Il doit être un bug...
- Il n'est pas étrange que position fixe éléments sont supprimés de la normale DOM flux. C'est en dehors de la portée de la question d'origine, mais aurait à mettre spécifique de la taille de l'élément fixe.
- cela provoque les colonnes à se superposent les uns des autres, mais
- oui. déjà abordé dans le commentaire précédent
InformationsquelleAutor Zim

Avec bootstrap 4 suffit d'utiliser col-auto

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-auto">
            Fixed content
        </div>
        <div class="col-sm">
            Normal scrollable content
        </div>
    </div>
</div>

ne fonctionne pas pour moi. les deux colonnes de défilement comme prévu.
essayez d'ajouter un peu de css, devrait aider: .container-fluid { flex: 1; }

InformationsquelleAutor stefanitsky

-3

Viens de le faire :

<div class="row" style="position:fixed;">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-3"> //
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

C'est une mauvaise pratique d'utiliser la ligne de l'attribut style, surtout lorsque la "position fixe" est disponible!

InformationsquelleAutor Dharm paaji

Vous devez vous connecter pour publier un commentaire.