Resize bootstrap div, um Inhalt anzupassen

Question

Ich benutze twitter Bootstrap, um 2 divs Seite an Seite platziert werden. Jedes Div hat mittlere und große Bilder darin, angeordnet mit jquery Isotop. Das Problem ist, dass, wenn nicht genügend Bilder in einem Div vorhanden sind, die div-Breite gleich bleibt und viel Platz übrig bleibt. Gefällt mir:

Ich möchte die divs zentral ausrichten und auch in Breite reduzieren, um die Bilder darin zu passen. Wie folgt aus:

Mein HTML-Code ist dies:

<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> 

Meine CSS sieht wie folgt aus:

#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; 
} 

Andere Stile sind Bootstrap ist.

Answer 1

Ich habe diese Frage komplett vergessen. Ich löste die obige Situation durch:

1) Einstellen der gleichen linken und rechten Ränder auf der Haupt container.

2) Einstellen des Isotops in Abschnitt1 auf right-to-left. Meine ist nicht wirklich eine arabische Seite, aber ich benutze Bilder meistens, also keine Probleme.

Entfernen Sie auch Spezifikationen mit fester Breite für alle Abschnitte. Lassen Sie die Ränder des Containers und das flüssige Design des Bootstraps auf ein zentriert optimiertes Design achten.

Answer 2

ich bootstrap auch mit isotope, verwenden aber ich zuerst, was zu tun ist, um die width ‚s und height‘ stellen Sie sicher, ist mein eigenes Design respektieren.

nur die, die Sie verwenden, ändern, in der Regel am Ende ich

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

dann, stellen Sie sicher, dass Ihre container hat die richtige Größe und gelten für Isotop verwendet wird.

Danach wird Ihr gesamtes Design eingestellt und fällt richtig mit Ihren Größen.

durch die Art und Weise, sollten Sie so etwas wie dies am Ende mit:

<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> 

und in jedem div, ich persönlich JsRender die Vorlagen zu machen, aber Sie sollten den Bootstrap-Layout haben, in jedem .item