css - Bootstrap : How to create a series of div on one line hiding the overflowing divs

Question

我有一个使用 bootstrap 构建的网站，我想使用 jquery.dragscroll 插件创建一个带有可滑动标题的表，但保留内置的 bootstrap 的流体网格。

所以我想创建表格的标题，我正在使用这个 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/

正如我们在 Fiddle 中看到的那样，所有的 div 在两行中都是可见的，我的目标是将所有的 div 放在一行中( overflow hidden 的 div)

我希望问题很清楚

Answer 1

你应该有一个容器来容纳所有 <div>有 width等于所有 <div> 的总和.那么这个容器的父容器必须有 overflow: auto .

如果您不知道渲染前的总宽度，您可以使用 JS 来计算它。

继续你的例子:

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