Bootstrap: Bir satırda div taşmasıyla ilgili bir boşluk nasıl oluşturulur?

Question

Bootstrap ile oluşturulmuş bir sitem var ve jquery.dragscroll eklentisini kullanarak swipeable başlık içeren bir tablo oluşturmak istiyorum ancak yerleşik sıvı ızgarasını koruyorum önyükleme.

Yani tablonun başlıklarını oluşturmak istiyor ve ben bu HTML kullanıyorum:

<div class="row-fluid"> 
    <div class="span12"> 
     <div style="overflow:hidden;width:90%;"> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
      <div style="display:inline-block;width:100px">some content</div> 
     </div> 
    </div> 
</div> 

kod buradadır: hepimiz birer bölümdür keman görebileceğiniz gibi http://jsfiddle.net/cVfzJ/1/

iki satırda görünür, benim objektif (taşan div gizleme) tek satırda tüm div'leri

Ben soru You should net

Answer 1

umut sahip olmaktır 'un toplamına eşit olan <div> için width olan bir kapsayıcıya sahip olun. Daha sonra bu kapsayıcının ebeveyni overflow: auto olmalıdır.

Oluşturmadan önce toplam genişliği bilmiyorsanız, JS'yi hesaplamak için kullanabilirsiniz. (15 dakika kadar cevabı kabul edemez, bu yüzden kabul etmek 3 dakika bekleyecek) bir çekicilik gibi çalışıyor,

<div class="row-fluid"> 
    <div class="span12"> 

     <!-- Changed from `hidden` to `auto`. --> 
     <div style="overflow:auto;width:90%;"> 

      <!-- This is the div that does the trick: --> 
      <div style="width:1200px;"> 

      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 
      <div style="display:inline-block;width:100px;">some content</div> 

      </div> 

     </div> 
    </div> 
</div>