html - example - div reparado dentro de la columna bootstrap

tooltip input bootstrap

Question

Estoy tratando de hacer un diseño sensible de dos columnas usando bootstrap, en la columna izquierda me gustaría colocar un menú, y en la derecha una galería de imágenes. Me gustaría que el menú permanezca fijo mientras se desplaza por las imágenes a la derecha.

La dificultad es que quiero que el menú fijo sea fluido con el diseño de arranque. Entonces, aunque no quiero que se mueva hacia arriba y hacia abajo cuando se desplaza, quiero que se vuelva a posicionar al cambiar el tamaño de la pantalla.

Este sitio web es un ejemplo de lo que quiero decir: http://www.galeriebertrand.com/artists

Parece que no puedo entender cómo se hizo en este sitio, no parece que la columna izquierda tenga una posición fija.

Answer 1

¿Estás utilizando Bootstrap 2.x o 3? Creo que lo que buscas es la clase de afijo. Vea los siguientes enlaces:

Bootstrap 2.x: http://getbootstrap.com/2.3.2/javascript.html#affix

Bootstrap 3: http://getbootstrap.com/javascript/#affix

Answer 2

Tendrá que usar las consultas de los medios para establecer la barra lateral como position: fixed mientras el ancho de la pantalla sea ancho.

Aquí hay un ejemplo: http://jsfiddle.net/hajpoj/Q7A33/1/

HTML:

<div class="row">
    <div class="col-sm-4 sidebar-outer">
        <div class="sidebar">/* fixed sidebar */
        </div>
    </div>
    <div class="col-sm-8">
        <div class="content"> /*fluid content */
        </div>
    </div>
</div>

CSS:

.sidebar-outer {
    position: relative;
}
@media (min-width: 768px) {
    .sidebar {
        position: fixed;
    }
}

Básicamente, en este ejemplo, las columnas se apilan a 768px de ancho (o bootstraps "small" width). Si desea que se apile en un ancho diferente al ancho "medio" de bootstrap (992px), querrá cambiar col-sm-4, col-sm-8 por col-md-4, col-md-8 y cambiar @media (min-width: 768px) to @media (min-width 992px)