बूटस्ट्रैप: ओवरफ्लोइंग divs को छिपाने वाली एक पंक्ति पर 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> 

कोड यहाँ है: http://jsfiddle.net/cVfzJ/1/

हम फिडल सभी divs हैं में देख सकते हैं दो पंक्तियों पर दिखाई दे रहा है, मेरे उद्देश्य है सभी एक ही पंक्ति पर divs (उमड़ती divs छुपा)

मुझे आशा है कि प्रश्न स्पष्ट

Answer 1

आप चाहिए है है सभी <div> के लिए एक कंटेनर है जिसमें width सभी <div> के योग के बराबर है। फिर इस कंटेनर के माता-पिता को overflow: auto होना चाहिए।

यदि आप प्रस्तुत करने से पहले कुल चौड़ाई नहीं जानते हैं तो आप इसकी गणना करने के लिए जेएस का उपयोग कर सकते हैं।

अपने उदाहरण को जारी:

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