Bù đắp vị trí thẳng đứng của các phần tử div trong Twitter Bootstrap

Question

Tôi đang cố gắng căn chỉnh chính xác các phần tử bù đắp theo chiều dọc bằng cách sử dụng Twitter Bootstrap với một lưới chất lỏng. (Lưu ý: Lưới được tùy biến tới 30 cột)

Xét hộp màu đỏ, đây là div vị trí cố: http://imgur.com/IkB2G Đây là vị trí thực tế hiện tại với mã của tôi: http://imgur.com/oJ2mG

Đây là mã tôi đang sử dụng . Không chắc chắn làm thế nào để có được hộp màu đỏ thấp hơn để di chuyển vào không gian trống trên nó, cho mỗi hình ảnh.

<div class="container-fluid nomargin"> 
<div class="row-fluid span30 nomargin"><div style="height:10px"></div></div> <!-- Vertical spacing between menu and content--> 
<div class="row-fluid"> 
<div class="span4"></div> 
<div class="span16 white-box"> 
    <!--Body content--> 
    <div style="height:100px"></div> 
</div> 
<div class="span6 white-box"> 
    <!--Body content--> 
    <div style="height:300px"></div> 
</div> 

<div class="span16 white-box"> 
    <!--Body content--> 
    <div style="height:100px"></div> 
</div> 
</div> 

Answer 1

Bạn cần nghĩ nó là 2 cột và cột bên trái bạn có hàng lồng nhau. Tôi không thể tạo ra các kích thước thích hợp từ mã bạn đã đăng. Nhưng hy vọng mã này sẽ cung cấp cho bạn một số cảm hứng.

<div class="row"> 
    <div class="span18"> 
     <div class="row"> 
      <div class="span18">This is a row on the left side.</div> 
     </div> 
     <div class="row"> 
      <div class="span18">This is a row on the left side.</div> 
     </div> 
    </div> 
    <div class="span12"> 
     This is the content on the right side. 
    </div> 
</div>