Diseño de dos columnas en Bootstrap (columnas máximo de ancho y tamaño fijo)

Question

¿Cómo puedo lograr el siguiente diseño de dos columnas en Bootstrap?

• Columna 1: El ancho se ajusta al tamaño disponible, entre un ancho mínimo y máximo
• Columna 2: ancho de tamaño fijo

Por ejemplo, si tengo:

• Columna 1 minio: 300px
• Columna 1 Ancho máximo: 800px
• Columna 2 Ancho: 400px

En una resolución con un ancho de 800px disponible, esperaría que ambas columnas tengan 400 px de ancho. En una resolución con 2000px disponible, esperaría que la primera columna sea 800px, la segunda columna sea 400px, y habría 800 px de espacio en blanco a la derecha de la pantalla.

Answer 1

Difícil porque Bootstrap es útil para sensible, no estático ...

¿Puede ser correcto de esta manera? http://bootply.com/98214

html

<div class="row">
  <div id="col1" class="col-xs-6 col-md-5">coco 1</div>
  <div id="col2" class="col-xs-6 col-md-2">coco 2</div>
</div>

CSS

#col1{
  background:green;
  max-width:800px !important;
}

#col2{
  background:yellow;
  max-width:400px !important;
}

No debe usar MIN-Width porque en caso de dispositivo extra pequeño, no tendrá un buen renderizado