부트 스트랩 : 넘치는 div를 숨기는 일련의 div를 만드는 방법

Question

부트 스트랩으로 사이트를 만들었으므로 jquery.dragscroll 플러그인을 사용하여 스 와이프 가능한 헤더로 표를 만들고 싶습니다.하지만 유체 격자는 그대로 유지됩니다. 부트 스트랩.

그래서 테이블의 헤더를 만들려면, 나는이 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> 

코드는 여기입니다 : 우리는 모든 div의이 바이올린에서 볼 수 있듯이 http://jsfiddle.net/cVfzJ/1/

두 행에 표시, 내 목표는 (넘치는 div의 숨어있는) 하나의 행에있는 모든 div의

나는 질문은 당신이해야 명확

Answer 1

희망을 가지고있다 모든 <div>의 합계와 동일한 width 인 모든 <div>에 대한 컨테이너가 있어야합니다. 그런 다음이 컨테이너의 부모는 overflow: auto이어야합니다.

렌더링 전 총 너비를 모른다면 JS를 사용하여 계산할 수 있습니다. (I 15 분까지 답을 받아 들일 수 없다, 그래서 나는 동의 3 분 정도 기다려야합니다) 매력 처럼 작동하고,

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