Bootstrap: Wie erstellt man eine Reihe von div in einer Zeile versteckt die überlaufenden divs

Question

Ich habe eine Website mit Bootstrap erstellt und ich möchte eine Tabelle mit swipeable Header mit dem jquery.dragscroll Plugin erstellen, aber unter Beibehaltung der Fluid Grid eingebaut Bootstrap.

Deshalb möchte ich die Header der Tabelle erstellen, und ich bin mit diesem 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> 

Der Code ist hier: http://jsfiddle.net/cVfzJ/1/

Wie wir in der Fiddle alle divs sind sehen sichtbar auf zwei Reihen, ist mein Ziel, alle divs auf einer einzigen Reihe zu haben (die überquellenden divs versteckt)

hoffe, dass ich die Frage

Answer 1

klar ist, sollten Sie haben Sie einen Behälter für alle <div>, die width gleich der Summe aller <div> hat. Dann muss das übergeordnete Element dieses Containers overflow: auto haben.

Wenn Sie die Gesamtbreite vor dem Rendern nicht kennen, können Sie sie mit JS berechnen.

& Weiter Beispiel:

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