Bootstrap：如何在一行上创建一系列 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>

代码在这里：http://jsfiddle.net/cVfzJ/1/

正如我们在 Fiddle 中看到的那样，所有 div 都在两行上可见，我的目标是将所有 div 放在一行上（隐藏溢出的 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>