Thay đổi kích thước bootstrap div để vừa với nội dung

Question

Tôi đang sử dụng trình khởi động twitter để tạo 2 div được đặt cạnh nhau. Mỗi div có hình ảnh trung bình và lớn bên trong nó, được sắp xếp bằng cách sử dụng jquery đồng vị. Vấn đề là khi không có đủ hình ảnh trong div, chiều rộng div vẫn giữ nguyên và có rất nhiều khoảng trống thừa. Như thế này:

Tôi muốn các div căn chỉnh thẳng hàng và cũng giảm chiều rộng để vừa với hình ảnh bên trong. Như thế này:

HTML code của tôi là:

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

CSS của tôi trông như thế này:

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

phong cách khác là của bootstrap.

Answer 1

Tôi hoàn toàn quên mất câu hỏi này mà tôi đã hỏi. Tôi đã giải quyết tình huống trên bằng cách:

1) Đặt lề trái và phải bằng nhau trên chính container.

2) Đặt đồng vị trong mục1 đến right-to-left. Tôi không thực sự là một trang web tiếng Ả Rập, nhưng tôi đang sử dụng hình ảnh chủ yếu là do đó không có vấn đề.

Ngoài ra, hãy xóa các thông số kỹ thuật có chiều rộng cố định cho tất cả các phần. Hãy để lề trên container, và thiết kế chất lỏng của bootstrap chăm sóc thiết kế được tối ưu hóa ở giữa.

Answer 2

Tôi cũng sử dụng bootstrap với isotope, nhưng điều tôi làm trước tiên là đảm bảo rằng thiết kế của riêng mình là width và height.

chỉ cần thay đổi những người bạn sử dụng, thông thường tôi sẽ chỉ sử dụng

.width2, .width3, .width4, .width8 và .height2, .height4

sau đó, hãy chắc chắn container của bạn có kích thước chính xác và áp dụng đối với đồng vị.

sau đó, tất cả thiết kế của bạn sẽ được đặt và rơi chính xác với kích thước của bạn.

bằng cách này, bạn nên kết thúc có một cái gì đó như thế này:

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

và bên trong mỗi div, cá nhân tôi sử dụng JsRender để render các mẫu, nhưng bạn nên có cách bố trí bootstrap, bên trong mỗi .item