2012-06-28 20 views
5

Twitter Bootstrap'i kullanarak bir grid ızgarası kullanarak ofsetting öğelerini doğru olarak dikey olarak hizalamaya çalışıyorum. http://imgur.com/IkB2G Bu benim koduyla şimdiki gerçek bir yerleşimdir:: kırmızı kutuları düşünüldüğündeTwitter içindeki div öğelerinin dikey konumunu ofset Önyükleme

, bu teşebbüs div yerleşimdir: (Not Izgara 30 sütunlara özelleştirilmiştir) İşte http://imgur.com/oJ2mG

kullanıyorum kodudur . Görüntülerin başına, üstteki boş alana taşımak için alt kırmızı kutuyu nasıl alamayacağınızdan emin olun.

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

cevap

4

2 sütun olarak düşünmeniz gerekir ve sol sütunda yuvalanmış satırlarınız vardır. Gönderdiğiniz kodun uygun boyutlarını oluşturamıyorum. Ama umarım bu kod size biraz ilham verecektir.

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

Bu kurulum, akışkan düzeni için de çalışır. Teşekkürler! Akışkan mizanpajı kullanılıyorsa alt-sp alanlar, üst satır sütun aralığı yerine tüm satır sütun sayısına dayanır. Ayrıca, bunun yalnızca akışkan sınıfları için ofsetlerin en son twitter uygulamasıyla çalıştığına inanıyorum. – user1318135