Hacer que la columna sea una posición fija en bootstrap

83

Usando Bootstrap, tengo una columna de cuadrícula class = "col-lg-3" que quiero colocar en la posición: fija mientras que el otro .col-lg-9 está en la posición normal (se puede desplazar por la página).

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

</div>

De la misma manera que la columna de la izquierda en LifeHacker.com Verá que la parte izquierda está arreglada sin embargo, me desplazo por la página.

Yo uso bootstrap v3.1.1

css twitter-bootstrap twitter-bootstrap-3
fuente
@Lowkase Adjunté el código por solicitud.
1
Esperando que el tema se quite "en espera". Mientras tanto, puede ver mi respuesta aquí: jsfiddle.net/dRbe4 . Puedo explicarlo mejor una vez que se vuelva a abrir la pregunta.
Lowkase

Respuestas:

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
fuente
3
¡Definitivamente la solución preferida ahora!
Scott
12
Esto no funciona correctamente en pantallas más pequeñas, el div derecho se colocará sobre la columna izquierda que contiene el fixeddiv
thefoxrocks
12
bootstrap 4 ?? cualquier idea
PirateApp
22
En Bootstrap 4, cambie 'affix' a 'sticky-top'
Tacio Costa
3
Para obtener información: Bootstrap eliminó el soporte para afijar con Bootstrap 4.0. Use 'position: sticky' ahora como se sugiere aquí: getbootstrap.com/docs/4.1/migration/#components
Antoine Delia
50

iterando sobre la respuesta de Ihab, solo usando position:fixedy bootstraps col-offset, no necesita ser específico en el ancho.

<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
fuente
5
esto no funciona si cambia la posición de las columnas
didando8a
¡Ésta es una solución mejor! funciona perfecto y no se necesita CSS. @ didando8a Si cambia la posición de las columnas, simplemente cambie col-lg-offset a un nuevo offset.
Roy Shoa
Si alguien también necesita la habilidad de desplazamiento a la columna fija, simplemente agregue altura y desbordamiento. ej style="position:fixed;height:100%;overflow-y:auto;".
Roy Shoa
7
@Roy "No se necesita CSS" - sí, es solo en la etiqueta de estilo;)
Mike Furlender
4
¡Esto es lo que necesitaba! Tenga en cuenta que las clases de compensación son diferentes en Bootstrap 4, por ejemplo offset-lg-3. getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
nickwesselman
29

Siguiendo la solución aquí 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>

Modifiqué algunos CSS para que funcionaran perfectamente:

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

Gracias @Lowkase por compartir la solución.


fuente
10
¿Es posible obtener el mismo resultado sin especificar el atributo de ancho?
ADIMO
1
Me doy cuenta de que esto debería ser dolorosamente obvio, pero no puedo hacer que funcione ... Quiero la columna desplazable a la izquierda y la columna fija a la derecha. Mi columna fija solo tiene una etiqueta, pero por alguna razón cuando configuro estas clases, la etiqueta "se pega" en la esquina superior izquierda en lugar de estar en la columna. He probado todas las diferentes combinaciones de atributos de estilo en vano. Agradecería un puntero :)
Reid
1
@ReidBelton comparte Jsfiddle para que pueda ayudarte con el código.
@ IhabAbdel-Rahim ¡Muchas gracias por la oferta! Sin embargo, no es necesario, ya que desde entonces he dejado de lado este proyecto.
Reid
Hice lo mismo, pero cuando agrego la clase fija, desaparece. Por favor ayuda.
Arpan
21

en Bootstrap 3 class="affix"funciona, pero en Bootstrap 4 no. Resolví este problema en Bootstrap 4 con class="sticky-top" (usar position: fixedCSS tiene sus propios problemas)

el código será algo como esto:

<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
fuente
Perfecto. position-fixedtambién funcionó para hacer que la columna se pegara a la parte superior, sin embargo, el contenido de la columna se desbordó. sticky-toparregló eso.
maxpaj
11

Actualizado para Bootstrap 4

Bootstrap 4 ahora incluye una position-fixedclase para este propósito, por lo que no hay necesidad de CSS adicional ...

<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
fuente
1
Si hago como en su ejemplo, el contenido de la columna "col-lg-3" sale de su padre. ¡Bastante extraño! (Trate de poner más texto en esto). Debe ser un error ...
ThePhi
1
No es extraño ya que los elementos de posición fija se eliminan del flujo DOM normal . Esto está fuera del alcance de la pregunta original, pero tendría que establecer un tamaño específico en el elemento fijo.
Zim
2
Sin embargo
ChumiestBucket
1
En mi caso, se prefirió esto, ya que definir la posición: el estilo fijo para el div col-lg-3 hizo que los cursores de los elementos secundarios internos se mostraran como predeterminados (en lugar de fx. Pointer).
chri3g91
4

Usa esto, funciona para mí y resuelve problemas con la pantalla pequeña.

<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>
Lucke
fuente
2

Con bootstrap 4 solo usa 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
fuente
1
no funcionó para mí. ambas columnas se desplazan como se esperaba.
ChumiestBucket
1
@star_trac intenta agregar algo de CSS, debería ayudar:.container-fluid { flex: 1; }
stefanitsky