Estoy tratando de hacer una de dos columnas diseño sensible usando bootstrap, en la columna de la izquierda me gustaría hacer un menú, y en la derecha una imagen de la galería. Me gustaría que el menú para permanecer fijo, mientras que el desplazamiento a través de las imágenes a la derecha.

La dificultad es que quiero que el menú fijo para ser fluido con el bootstrap de diseño. Así, mientras que no quiero que se mueva hacia arriba y hacia abajo cuando el desplazamiento quiero a reposicionarse al cambiar el tamaño de la pantalla.

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

Me parece que no puede entender cómo fue hecho en este sitio, que no parece que la columna de la izquierda se ha corregido el posicionamiento.

  • Gire a la izquierda div posición = fijo , y cambiar el contenido del derecho div. En su mayoría la página de la u mostró dosent parecen ser una sola página de la aplicación. Pero como sugerencia se debe intentar usar angular directivas y ponerlo en una sola página de la aplicación. A la izquierda div= fijo y derecho div= relativo
InformationsquelleAutor fred | 2013-09-17

2 Comentarios

  1. 17

    Tendrás que utilizar consultas de medios de comunicación para configurar la barra lateral como position: fixed mientras que el ancho de la pantalla es muy amplia.

    Heres 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 convierten en apiladas en 768px de ancho (o se levanta a los «pequeños» de ancho). Si usted quería para ser apilados en un ancho diferente, como bootstrap del «medio» de ancho (992px) tendrá que cambiar col-sm-4, col-sm-8 a col-md-4, col-md-8 y cambio @media (min-width: 768px) to @media (min-width 992px)

  2. 13

    Están utilizando Bootstrap 2.x o 3? Yo creo que lo que se busca es el afijo de la clase. Ver los links de abajo:

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

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

    • Estoy usando bootstrap 3. Muchas gracias, esto parece ser lo que estoy buscando, voy a darle una oportunidad!
    • Genial, no hay problema. Si esto responde a tu pregunta, no te olvides de golpear la marca de verificación!
    • el departamento de salud. se me olvidó acerca de esta clase… pero si quería hacer manualmente sin js.. entonces mi solución 🙂

Dejar respuesta

Please enter your comment!
Please enter your name here