Bootstrap: Jak utworzyć serię div w jednej linii ukrywając przepełnione divy

Question

Mam witrynę zbudowaną za pomocą programu startowego i chcę utworzyć tabelę z przesuwanym nagłówkiem za pomocą wtyczki jquery.dragscroll, ale z zachowaniem wbudowanej siatki płynów bootstrap.

Więc chcę tworzyć nagłówki tabeli, a używam tego 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> 

kod jest tutaj: http://jsfiddle.net/cVfzJ/1/

Jak widzimy w Fiddle wszystkie div są widoczne w dwóch rzędach, moim celem jest, aby wszystkie div w jednym wierszu (Ukrywanie przepełnione div)

mam nadzieję, że pytanie jest jasne

Answer 1

powinieneś mieć kontener dla wszystkich <div>, który ma width równy sumie wszystkich <div>. Wtedy rodzic tego kontenera musi mieć overflow: auto.

Jeśli nie znasz całkowitej szerokości przed renderowaniem, możesz użyć JS do jej obliczenia.

Kontynuując swój przykład:

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