Bootstrap: come creare una serie di div su una riga che nasconde le immersioni traboccanti

Question

Ho un sito creato con bootstrap e voglio creare una tabella con intestazione swipeable usando il plugin jquery.dragscroll ma preservando la griglia fluida integrata bootstrap.

Quindi voglio creare le intestazioni del tavolo, e sto usando questo HTML:

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

Il codice è qui: http://jsfiddle.net/cVfzJ/1/

Come si può vedere nella Fiddle tutti i div sono visibile su due file, il mio obiettivo è quello di avere tutti i div su una singola riga (che nascondono i div traboccanti)

spero che la questione è chiara

Answer 1

si dovrebbe avere un contenitore per tutti gli <div> che ha lo width uguale alla somma di tutti gli <div>. Quindi il genitore di questo contenitore deve avere overflow: auto.

Se non si conosce la larghezza totale prima del rendering, è possibile utilizzare JS per calcolarlo.

Continuando il tuo esempio:

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