Ridimensionare il div di bootstrap per adattarsi al contenuto

Question

Sto usando twitter bootstrap per fare 2 div affiancate. Ogni div ha immagini medie e grandi al suo interno, disposte usando jquery isotopo. Il problema è che quando non ci sono abbastanza immagini in un div, la larghezza div rimane la stessa e c'è ancora molto spazio in più. In questo modo:

Voglio che i div si allineino centralmente e riducano anche la larghezza per adattarsi alle immagini al suo interno. Come questo:

Il mio codice HTML è questo:

<div id="container" class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="legend span8">Section1</div> 
     <div class="legend span4">Section2</div> 
    </div> 
    <div class="row-fluid"> 
     <div id="section1" class="span8"> 
      <div class="small"><img src="images/1.jpg" /></div> 
      <div class="small"><img src="images/2.jpg" /></div> 
      <div class="big"><img src="images/3.jpg" /></div> 
     </div> 
     <div id="section2" class="span4"> 
      <div class="small"><img src="images/1.jpg" /></div> 
      <div class="small"><img src="images/2.jpg" /></div> 
      <div class="big"><img src="images/3.jpg" /></div> 
     </div> 
    </div> 
</div> 

mio CSS si presenta così:

#section1 .small{ 
    width:150px; 
    height:200px; 
    overflow:hidden; 
} 
#section1 .big{ 
    width:320px; 
    height:420px; 
    overflow:hidden; 
} 
#section2 .small{ 
    width:80px; 
    height:100px; 
    overflow:hidden; 
} 
#section2 .big{ 
    width:170px; 
    height:220px; 
    overflow:hidden; 
} 

Altri stili sono bootstrap di.

Answer 1

Mi sono completamente dimenticato di questa domanda che avevo chiesto. Ho risolto la situazione di cui sopra:

1) Impostazione dei margini sinistro e destro uguali sul numero container principale.

2) Impostazione dell'isotopo nella Sezione 1 a right-to-left. Il mio non è davvero un sito arabo, ma sto usando le immagini principalmente così nessun problema.

Inoltre, rimuovere le specifiche della larghezza fissa per tutte le sezioni. Lascia i margini sul contenitore e il design fluido di bootstrap si prende cura del design ottimizzato centrato.

Answer 2

Io uso anche bootstrap con isotope, ma quello che faccio prima è assicurarsi che le width 's e height' s rispetto il mio proprio disegno.

basta cambiare quelle che si usano, di solito finisco con

.width2, .width3, .width4, .width8 e .height2, .height4

quindi, assicurarsi che il container ha la dimensione corretta e si applicano a isotopo.

dopodiché, tutto il disegno verrà impostato e verrà corretto correttamente con le dimensioni.

tra l'altro, si dovrebbe finire per avere qualcosa di simile:

<div id="container"> 
    <div class="weather item width2 height8" data-id="1"></div> 
    <div class="country item width2 height4" data-id="2"></div> 
    <div class="country item width2 height4" data-id="3"></div> 
    <div class="country item width2 height4" data-id="4"></div> 
    <div class="country item width2 height4" data-id="5"></div> 
</div> 

e all'interno di ogni div, io personalmente uso JsRender per rendere i modelli, ma si dovrebbe avere il layout bootstrap, all'interno di ogni .item