CSS Bootstrap：如何在一行上创建一系列 div 以隐藏溢出的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16773990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: How to create a series of div on one line hiding the overflowing divs
提问by Mangiucugna
I have a site built with bootstrap and I want to create a table with swipeable header using the jquery.dragscroll plugin but preserving the fluid grid built-in bootstrap.
我有一个使用 bootstrap 构建的站点，我想使用 jquery.dragscroll 插件创建一个带有可滑动标题的表，但保留流体网格内置引导程序。
So I want to create the headers of the table, and I am using this HTML:
所以我想创建表格的标题，我正在使用这个 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>
The code is here: http://jsfiddle.net/cVfzJ/1/
代码在这里：http: //jsfiddle.net/cVfzJ/1/
As we can see in the Fiddle all the divs are visible on two rows, my objective is to have all the divs on a single row (hiding the overflowing divs)
正如我们在 Fiddle 中看到的，所有 div 都在两行上可见，我的目标是将所有 div 放在一行上（隐藏溢出的 div）
I hope the question is clear
我希望问题很清楚
回答by Arthur Corenzan
You should have a container for all the <div>that has widthequal to the sum of all <div>. Then the parent of this container has to have overflow: auto.
你应该对所有的容器<div>具有width等于所有的总和<div>。那么这个容器的父级必须有overflow: auto.
If you don't know the total width prior to the render you can use JS to calculate it.
如果您在渲染之前不知道总宽度，您可以使用 JS 来计算它。
Continuing your example:
继续你的例子：
<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>
