css - examples - ¿Cómo construir un diseño de 2 columnas(Fixed-Fluid) con Twitter Bootstrap?

class row bootstrap

Question

¿Es posible crear un Layout de 2 columnas (Fixed-Fluid) ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/ ) con Twitter Bootstrap (http : //twitter.github.com/bootstrap/)?

¿Tienes alguna solución?

Answer 1

La respuesta aceptada parece ser fluido-fluido. Aquí hay una respuesta que en realidad es fluido fijo:

https://stackoverflow.com/a/9739345/237091

Answer 2

- Otra actualización -

Desde Twitter Bootstrap versión 2.0 - que vio la eliminación de la clase .container-fluid - no ha sido posible implementar un diseño de dos columnas de fluido fijo utilizando solo las clases de arranque, sin embargo, he actualizado mi respuesta para incluir algunos pequeños cambios de CSS. eso se puede hacer en su propio código CSS que lo hará posible

Es posible implementar una estructura de fluidos fijos utilizando el CSS que se encuentra a continuación y un código HTML ligeramente modificado tomado de la página de documentación de diseños de Twitter Bootstrap Scaffolding :

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

.fixed {
    width: 150px;  /* the fixed width required */
    float: left;
}

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     overflow: hidden;
}


/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

He mantenido la respuesta a continuación, aunque la edición para admitir 2.0 la convertía en una solución de fluido fluido, ya que explica los conceptos detrás de hacer que la barra lateral y el contenido tengan la misma altura (una parte importante de la pregunta de los consultores identificada en los comentarios)

Importante

La respuesta a continuación es fluido-fluido

Actualización Como señaló @JasonCapriotti en los comentarios, la respuesta original a esta pregunta (creada para v1.0) no funcionó en Bootstrap 2.0. Por esta razón, he actualizado la respuesta para admitir Bootstrap 2.0

Para garantizar que el contenido principal ocupe al menos el 100% de la altura de la pantalla, debemos establecer la altura del html y body al 100% y crear una nueva clase css llamada .fill que tenga una altura mínima de 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

Luego podemos agregar la clase .fill a cualquier elemento que necesitemos para tomar el 100% de la altura del sceen. En este caso, lo agregamos al primer div:

<div class="container-fluid fill">
    ...
</div>

Asegurar que la barra lateral y las columnas de contenido tengan la misma altura es muy difícil e innecesario. En su lugar, podemos usar el pseudo selector ::after para agregar un elemento de filler que dará la ilusión de que las dos columnas tienen la misma altura:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Para asegurarnos de que el elemento .filler está posicionado en relación con el elemento .fill , necesitamos agregar position: relative a .fill :

.fill { 
    min-height: 100%;
    position: relative;
}

Y finalmente agregue el estilo .filler al HTML:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

Notas

• Si necesita el elemento a la izquierda de la página para ser el relleno, entonces necesita cambiar a la right: 0 a la left: 0 .

Answer 3

Actualización 2018

Bootstrap 4

Ahora que BS4 es flexbox, el fluido fijo es simple. Simplemente configure el ancho de la columna fija y use la clase .col en la columna de fluido.

.sidebar {
    width: 180px;
    min-height: 100vh;
}

<div class="row">
    <div class="sidebar p-2">Fixed width</div>
    <div class="col bg-dark text-white pt-2">
        Content
    </div>
</div>

http://www.codeply.com/go/7LzXiPxo6a

Bootstrap 3 ..

Un enfoque para un diseño de fluido fijo es utilizar consultas de medios que se alinean con los puntos de interrupción de Bootstrap para que solo use las columnas de ancho fijo sean pantallas más grandes y luego permita que el diseño se apile de manera receptiva en pantallas más pequeñas ...

@media (min-width:768px) {
  #sidebar {
      min-width: 300px;
      max-width: 300px;
  }
  #main {
      width:calc(100% - 300px);
  }
}

Demostración de fluido fijo de trabajo Bootstrap 3

Preguntas y respuestas relacionadas:
Columna de ancho fijo con un contenedor de fluido en bootstrap
¿Cómo se dejó la columna fija y se puede desplazar a la derecha en Bootstrap 4, sensible?