Bootstrap 3.0: rejilla fluida que incluye tamaños de columna fijos

Estoy aprendiendo a usar Bootstrap. Actualmente, me estoy abriendo paso entre los diseños. Si bien Bootstrap es genial, todo lo que veo parece anticuado. Por mi vida, tengo lo que creo que es un diseño básico que no puedo entender. Mi diseño se ve así:

---------------------------------------------------------------------------
|       |       |                                                         |
|       |       |                                                         |
| 240px | 160px | All Remaining Width of the Window                       |
|       |       |                                                         |
|       |       |                                                         |
--------------------------------------------------------------------------|

Esta cuadrícula debe ocupar toda la altura de la ventana. Según tengo entendido, necesito mezclar anchos fijos y fluidos. Sin embargo, Bootstrap 3.0 ya no parece tener la clase de fluido. Incluso si lo hiciera, parece que no puedo entender cómo mezclar fluido y tamaños de columna fijos. ¿Alguien sabe cómo hacer esto en Bootstrap 3.0?

Realmente no hay una manera fácil de mezclar anchos fluidos y anchos fijos con Bootstrap 3. Está destinado a ser así, ya que el sistema de red está diseñado para ser fluido y sensible. Podría intentar hackear algo, pero iría en contra de lo que el sistema Responsive Grid está tratando de hacer, cuya intención es hacer que ese diseño fluya a través de diferentes tipos de dispositivos.

Si necesita seguir con este diseño, consideraría diseñar su página con CSS personalizado y no usar la cuadrícula.

editar: como muchas personas parecen querer hacer esto, he escrito una breve guía con un caso de uso más general aquí https://www.atlascode.com/bootstrap-fixed-width-sidebars/ . Espero eso ayude.

El sistema de cuadrícula bootstrap3 admite el anidamiento de filas que le permite ajustar la fila raíz para permitir menús laterales de ancho fijo.

Debe colocar un relleno a la izquierda en la fila raíz, luego tener una fila secundaria que contenga los elementos de diseño de cuadrícula normales.

Así es como suelo hacer esto http://jsfiddle.net/u9gjjebj/

html

<div class="container">
    <div class="row">
        <div class="col-fixed-240">Fixed 240px</div>
        <div class="col-fixed-160">Fixed 160px</div>
        <div class="col-md-12 col-offset-400">
            <div class="row">
            Standard grid system content here
            </div>
        </div>
    </div>
</div>

css

.col-fixed-240{
    width:240px;
    background:red;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-fixed-160{
    margin-left:240px;
    width:160px;
    background:blue;
    position:fixed;
    height:100%;
    z-index:1;
}

.col-offset-400{
    padding-left:415px;
    z-index:0;
}

o use la propiedad de visualización con table-cell;

css

.table-layout {
    display:table;
    width:100%;
}
.table-layout .table-cell {
    display:table-cell;
    border:solid 1px #ccc;
}

.fixed-width-200 {
    width:200px;
}

html

<div class="table-layout">
    <div class="table-cell fixed-width-200">
        <p>fixed width div</p>
    </div>
    <div class="table-cell">
        <p>fluid width div</p>    
    </div>
</div>

http://jsfiddle.net/DnGDz/

Tuve un problema ligeramente diferente:

• Necesitaba combinar columnas fijas y fluidas como parte de una tabla en lugar de como parte de un diseño de ventana completa
• Necesitaba tener columnas fijadas tanto a la izquierda como a la derecha
• No me preocupaban los fondos de columna que usaban la altura completa de la fila que los contenía

Como resultado, recurrí a floatlas columnas izquierda y derecha, y luego pude usar Bootstrap rowpara hacer las columnas fluidas en el medio.

<div>
    <div class="pull-left" style="width:240px">Fixed 240px</div>
    <div class="pull-right" style="width:120px">Fixed 120px</div>
    <div style="margin-left:240px;margin-right:120px">
        <div class="row" style="margin:0px">
            Standard grid system content here
        </div>
    </div>
</div>

Actualizado 2018

En mi opinión, la mejor manera de abordar esto en Bootstrap 3 sería usar consultas de medios que se alineen con los puntos de interrupción de Bootstrap para que solo use las columnas de ancho fijo en pantallas más grandes y luego deje que el diseño se apile de manera receptiva en pantallas más pequeñas. De esta manera mantienes la capacidad de respuesta ...

@media (min-width:768px) {
  #sidebar {
      width: inherit;
      min-width: 240px;
      max-width: 240px;
      min-height: 100%;
      position:relative;
  }
  #sidebar2 {
      min-width: 160px;
      max-width: 160px;
      min-height: 100%;
      position:relative;
  }
  #main {
      width:calc(100% - 400px);
  }
}

Working Bootstrap Fixed-Fluid Demo

Bootstrap 4 tendrá Flexbox, por lo que los diseños como este serán mucho más fáciles: http://www.codeply.com/go/eAYKvDkiGw

OK, mi respuesta es super agradable:

<style>
    #wrapper {
        display:flex;    
        width:100%;
        align-content: streach;
        justify-content: space-between;
    }    

    #wrapper div {
        height:100px;
    }

    .static240 {
        flex: 0 0 240px;
    }
    .static160 {
        flex: 0 0 160px;
    }

    .growMax {
        flex-grow: 1;
    }

</style>

<div id="wrapper">
  <div class="static240" style="background:red;" > </div>
  <div class="static160"  style="background: green;" > </div> 
  <div class="growMax"  style="background:yellow;"  ></div>
</div>

parque infantil jsfiddle

si desea soporte para todos los navegadores, use https://github.com/10up/flexibility

ACTUALIZACIÓN 2014-11-14: La siguiente solución es demasiado antigua, recomiendo usar el método de diseño de caja flexible. Aquí hay una descripción general: http://learnlayout.com/flexbox.html

Mi solución

html

<li class="grid-list-header row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

<li class="grid-list-item row-cw row-cw-msg-list ...">
  <div class="col-md-1 col-cw col-cw-name">
  <div class="col-md-1 col-cw col-cw-keyword">
  <div class="col-md-1 col-cw col-cw-reply">
  <div class="col-md-1 col-cw col-cw-action">
</li>

scss

.row-cw {
  position: relative;
}

.col-cw {
  position: absolute;
  top: 0;
}


.ir-msg-list {

  $col-reply-width: 140px;
  $col-action-width: 130px;

  .row-cw-msg-list {
    padding-right: $col-reply-width + $col-action-width;
  }

  .col-cw-name {
    width: 50%;
  }

  .col-cw-keyword {
    width: 50%;
  }

  .col-cw-reply {
    width: $col-reply-width;
    right: $col-action-width;
  }

  .col-cw-action {
    width: $col-action-width;
    right: 0;
  }
}

Sin modificar demasiado código de diseño de arranque.

Actualización (no desde OP): agregue el fragmento de código a continuación para facilitar la comprensión de esta respuesta. Pero no parece funcionar como se esperaba.

ul {
  list-style: none;
}
.row-cw {
  position: relative;
  height: 20px;
}
.col-cw {
  position: absolute;
  top: 0;
  background-color: rgba(150, 150, 150, .5);
}
.row-cw-msg-list {
  padding-right: 270px;
}
.col-cw-name {
  width: 50%;
  background-color: rgba(150, 0, 0, .5);
}
.col-cw-keyword {
  width: 50%;
  background-color: rgba(0, 150, 0, .5);
}
.col-cw-reply {
  width: 140px;
  right: 130px;
  background-color: rgba(0, 0, 150, .5);
}
.col-cw-action {
  width: 130px;
  right: 0;
  background-color: rgba(150, 150, 0, .5);
}

<ul class="ir-msg-list">
  <li class="grid-list-header row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>

  <li class="grid-list-item row-cw row-cw-msg-list">
    <div class="col-md-1 col-cw col-cw-name">name</div>
    <div class="col-md-1 col-cw col-cw-keyword">keyword</div>
    <div class="col-md-1 col-cw col-cw-reply">reply</div>
    <div class="col-md-1 col-cw col-cw-action">action</div>
  </li>
</ul>

¿Por qué no simplemente establece las dos columnas de la izquierda en un fijo en su propio CSS y luego crea un nuevo diseño de cuadrícula de las 12 columnas completas para el resto del contenido?

<div class="row">
    <div class="fixed-1">Left 1</div>
    <div class="fixed-2">Left 2</div>
    <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-11"></div>
    </div>
</div>