Bootstrap 3.0 – Cuadrícula de fluido que incluye tamaños de columna fijos

Estoy aprendiendo cómo usar Bootstrap. Actualmente, estoy abriéndome camino a través de 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 descifrar. Mi diseño se ve así:

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

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

Realmente no hay una manera fácil de mezclar anchuras fluidas y fijas con Bootstrap 3. Tiene la intención de ser así, ya que el sistema de cuadrícula está diseñado para ser fluido y sensible. Podría tratar de piratear algo, pero iría en contra de lo que intenta hacer el sistema de cuadrícula receptiva, cuya intención es hacer que el 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 utilizar 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 anidamiento de fila que le permite ajustar la fila raíz para permitir menús de ancho fijo.

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

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

html

 
Fixed 240px
Fixed 160px
Standard grid system content here

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

 

fixed width div

fluid width 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 estaba preocupado por los fondos de columna usando la altura completa de la fila que contiene

Como resultado, recurrí a las columnas izquierda y derecha, y pude usar la row de Bootstrap para hacer las columnas de fluido en el medio.

 
Fixed 240px
Fixed 120px
Standard grid system content here

Actualizado 2018

OMI, la mejor manera de abordar esto en Bootstrap 3 sería utilizar consultas de medios que se alineen 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. 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); } } 

Demostración de fluido fijo de trabajo Bootstrap

Bootstrap 4 tendrá flexbox para que los diseños como este sean mucho más fáciles: http://www.codeply.com/go/eAYKvDkiGw

OK, mi respuesta es súper agradable:

  

jsfiddle parque infantil

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

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


Mi solución

html

 
  • 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 el código de disposición de arranque.


    Actualización (no desde OP): agregar 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); } 
     
    • name
      keyword
      reply
      action
    • name
      keyword
      reply
      action

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

     
    Left 1
    Left 2