Bootstrap:如何在一行上创建一系列div来隐藏溢出的div

Question

我有一个使用bootstrap构建的站点,我想使用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/

正如我们在小提琴中看到的那样,所有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>