Stellen Sie die feste Position der Spalte im Bootstrap ein

83

Mit Bootstrap habe ich eine Rasterspaltenklasse = "col-lg-3", die ich an Position bringen möchte: fest, während die andere .col-lg-9 die normale Position ist (durch die Seite scrollen).

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

</div>

Genauso wie die linke Spalte in LifeHacker.com. Sie werden sehen, dass der linke Teil fixiert ist, aber ich scrolle durch die Seite.

Ich benutze Bootstrap v3.1.1

css twitter-bootstrap twitter-bootstrap-3
quelle
@ Lowkase Ich habe den Code pro Anfrage angehängt.
1
Warten auf das Entfernen des Themas "in der Warteschleife". In der Zwischenzeit können Sie meine Antwort hier sehen: jsfiddle.net/dRbe4 . Ich kann es besser erklären, wenn die Frage wieder geöffnet wird.
Lowkase

Antworten:

87 
<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>
Naga Prasanna
quelle
3
Auf jeden Fall die bevorzugte Lösung jetzt!
Scott
12
Dies funktioniert nicht richtig auf kleineren Bildschirmen, die rechte Div wird über der linken Spalte mit der fixedDiv liegen
thefoxrocks
12
Bootstrap 4 ?? irgendwelche Ideen
PirateApp
21
Ändern Sie in Bootstrap 4 "Affix" in "Sticky-Top"
Tacio Costa
3
Zur Info: Bootstrap hat die Unterstützung für das Anbringen von Bootstrap 4.0 eingestellt. Verwenden Sie jetzt 'position: sticky', wie hier vorgeschlagen: getbootstrap.com/docs/4.1/migration/#components
Antoine Delia
50

Wenn Sie über Ihabs Antwort iterieren position:fixedund nur Bootstraps verwenden, müssen col-offsetSie nicht genau auf die Breite eingehen.

<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>
Pablo Fernandez
quelle
5
Dies funktioniert nicht, wenn Sie die Position der Spalten
ändern
Dies ist eine bessere Lösung! arbeiten perfekt und es wird kein CSS benötigt. @ didando8a Wenn Sie die Spaltenposition ändern, ändern Sie einfach den Spalten-Offset in einen neuen Offset.
Roy Shoa
Wenn jemand auch eine Bildlauffunktion für die feste Spalte benötigt, fügen Sie einfach Höhe und Überlauf hinzu. zB style="position:fixed;height:100%;overflow-y:auto;".
Roy Shoa
7
@ Roy "Es wird kein CSS benötigt" - ja, es ist nur im Style-Tag;)
Mike Furlender
4
Das habe ich gebraucht! Beachten Sie, dass die Offset-Klassen in Bootstrap 4 unterschiedlich sind, z offset-lg-3. getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
nickwesselman
29

Nach der Lösung hier 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>

Ich habe einige CSS so modifiziert, dass sie perfekt funktionieren:

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

Vielen Dank an @Lowkase für das Teilen der Lösung.


quelle
10
Ist es möglich, dasselbe Ergebnis zu erzielen, ohne das Attribut width anzugeben?
ADIMO
1
Mir ist klar, dass dies schmerzlich offensichtlich sein sollte, aber ich kann es nicht zum Laufen bringen ... Ich möchte die scrollbare Spalte links und die feste Spalte rechts. Meine feste Spalte enthält nur eine Beschriftung, aber aus irgendeinem Grund "haftet" die Beschriftung beim Festlegen dieser Klassen in der oberen linken Ecke, anstatt in der Spalte zu sein. Ich habe alle verschiedenen Kombinationen von Stilattributen ohne Erfolg ausprobiert. Würde mich über einen Zeiger freuen :)
Reid
1
@ReidBelton teile Jsfiddle, damit ich dir mit dem Code helfen kann.
@ IhabAbdel-Rahim Vielen Dank für das Angebot! Nicht notwendig, da ich dieses Projekt inzwischen eingestellt habe.
Reid
Ich habe das gleiche getan, aber wenn ich die feste Klasse hinzufüge, ist sie verschwunden. Bitte helfen Sie.
Arpan
21

in Bootstrap 3 class="affix"funktioniert, in Bootstrap 4 jedoch nicht. Ich habe dieses Problem in Bootstrap 4 mit gelöst class="sticky-top" (die Verwendung position: fixedin CSS hat seine eigenen Probleme)

Code wird ungefähr so ​​aussehen:

<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>
Mohsen Sahrayi
quelle
Perfekt. position-fixedfunktionierte auch dafür, dass die Säule oben klebte, der Inhalt der Säule lief jedoch über. sticky-topdas behoben.
Maxpaj
11

Aktualisiert für Bootstrap 4

Bootstrap 4 enthält jetzt eine position-fixedKlasse für diesen Zweck, sodass kein zusätzliches CSS erforderlich ist ...

<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

Zim
quelle
1
Wenn ich wie in Ihrem Beispiel vorgehe, wird der Inhalt der Spalte "col-lg-3" nicht mehr übergeordnet. Recht seltsam! (Versuchen Sie, mehr Text einzufügen). Es muss ein Fehler sein ...
ThePhi
1
Dies ist nicht ungewöhnlich, da Elemente mit fester Position aus dem normalen DOM-Fluss entfernt werden . Dies liegt außerhalb des Bereichs der ursprünglichen Frage, müsste jedoch eine bestimmte Größe für das feste Element festlegen.
Zim
2
Dies führt jedoch dazu, dass sich die Spalten überlappen
ChumiestBucket
1
In meinem Fall wurde dies bevorzugt, da die Position definiert wurde: Durch das feste Styling des col-lg-3-Div wurden die Cursor der inneren untergeordneten Elemente als Standard angezeigt (anstelle des fx. Zeigers).
chri3g91
4

Verwenden Sie dies, funktioniert für mich und lösen Sie Probleme mit kleinen Bildschirm.

<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>
Glück
quelle
2

Verwenden Sie bei Bootstrap 4 einfach 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>
stefanitsky
quelle
1
hat bei mir nicht funktioniert. Beide Spalten scrollen wie erwartet.
ChumiestBucket
1
@star_trac versuchen, einige CSS hinzuzufügen, sollte helfen:.container-fluid { flex: 1; }
Stefanitsky