Domanda

Come posso ottenere il seguente layout a due colonne in Bootstrap?

  • Colonna 1: larghezza si regola alla dimensione disponibile, tra una larghezza min e massima
  • Colonna 2: larghezza delle dimensioni fisse

Ad esempio, se ho:

  • Colonna 1 min larghezza: 300px
  • Colonna 1 Larghezza massima: 800px
  • Colonna 2 Larghezza: 400px

In una risoluzione con una larghezza di 800px disponibile, mi aspetto che entrambe le colonne siano larghe 400px. In una risoluzione con 2000px disponibile, mi aspetto che la prima colonna fosse 800px, la seconda colonna sarà 400px e ci sarebbero 800px di spazio vuoto a destra dello schermo.

È stato utile?

Soluzione

Difficile perché bootstrap è utile per reattivo, non statico ...

Può essere corretto in questo modo: 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;
}

Non dovresti usare la larghezza minima perché in caso di dispositivo extra piccolo, non avrà un buon rendering

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top