web-dev-qa-db-fra.com

Définir la position fixe de la colonne dans bootstrap

En utilisant Bootstrap, j'ai une classe de grille class = "col-lg-3" que je souhaite placer en position: fixée alors que l'autre .col-lg-9 est en position normale (possibilité de défilement dans la page).

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

</div>

De la même manière que la colonne de gauche de LifeHacker.com Vous verrez que la partie de gauche est fixée, mais je fais défiler la page.

J'utilise bootstrap v3.1.1

csscss3twitter-bootstraptwitter-bootstrap-3
68
user1556571

En suivant 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é certains CSS pour qu'ils fonctionnent parfaitement:

.fixed {
        position: fixed;
        width: 25%;
}
.scrollit {
        float: left;
        width: 71%
}

Merci @ Lowkase pour le partage de la solution.

31
user1556571
<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>
76
Naga prasanna

itérant sur la réponse d'Ihab, en utilisant simplement position:fixed et bootstraps col-offset, vous n'avez pas besoin de spécifier 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>
43
Pablo Fernandez

dans Bootstrap 3 class="affix" fonctionne, mais dans Bootstrap 4, cela ne fonctionne pas. J'ai résolu ce problème dans Bootstrap 4 avec class="sticky-top" (utiliser position: fixed en CSS a ses propres problèmes)

le 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>
12
Mohsen Sahrayi

Mis à jour pour Bootstrap 4

Bootstrap 4 inclut maintenant une classe position-fixed à cette fin, de sorte qu'il n'est pas nécessaire de recourir à des CSS supplémentaires ...

<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

5
Zim

Utilisez ceci, fonctionne pour moi et résolvez les problèmes avec le 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>
4
Lucke

Avec bootstrap 4, utilisez simplement 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>
1
stefanitsky