Layout de duas colunas no bootstrap (largura máxima e colunas de tamanho fixo)

Question

Como posso alcançar o seguinte layout de duas colunas no Bootstrap?

• Coluna 1: a largura se ajusta ao tamanho disponível, entre uma largura mínima e máxima
• Coluna 2: largura de tamanho fixo

Por exemplo, se eu tiver:

• Coluna 1 min Largura: 300px
• Coluna 1 Largura máxima: 800px
• Coluna 2 Largura: 400px

Em uma resolução com uma largura de 800px disponível, eu esperaria que as duas colunas tivessem 400px de largura. Em uma resolução com 2000px disponível, eu esperaria que a primeira coluna fosse de 800px, a segunda coluna a ser 400px, e haveria 800px de espaço em branco à direita da tela.

Answer 1

Difícil porque o bootstrap é útil para responsivo, não estático ...

Pode estar correto com a desta maneira: 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;
}

Você não deve usar a largura da minúscula porque, em caso de dispositivo extra pequeno, ele não terá uma boa renderização