TW Bootstrap:如何溢出列

Question

我想要一个列可以水平滚动的行:

如您所见,该行是外部块(带填充).在它的内部,有列,每个都有一些span*类,如span3.由于所有列都不适合行,因此滚动条位于底部.

这是我尝试做的(使用内联css),到目前为止没有运气.

<div class="row">

<!-- the parent element which will have scrollbar -->
<div class="span12" style="white-space: nowrap; overflow-x: auto;">

<div class="row">

<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
<div class="span3" style="display: inline-block;">content here</div>
...

<div>

</div>

</div>

但是一旦它们无法放入行中,列就会换行.我怎样才能做到这一点？

谢谢.

Answer 1

更新

我想你只是错过了float: none;:float力量display: block;.

现场演示(jsfiddle)

<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>

div.myClass {
    overflow-x: auto;
    white-space: nowrap;
}
div.myClass [class*="col"], /* TWBS v3 */
div.myClass [class*="span"] {  /* TWBS v2 */
    display: inline-block;
    float: none; /* Very important */
}

无论如何,这不是因为你可以做到你应该这样做.像旋转木马这样的东西可以达到这种效果.

恕我直言,一个网页最初是为了水平滚动,而JavaScript可以做任何事情.