css - TW Bootstrap: How to overflow columns

Question

I want to have a row where columns are going to be horizontally scrollable:

As you can see the row is the outer block (with padding). Inside of it, there are columns where each has some span* class such as span3. And since all of the columns do not fit in the row, the scrollbar is on the bottom.

Here is what I tried doing (with inline css) and so far no luck.

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

But then the columns just wrap once they can't fit into the row. How can I do this?

Thank you.

Answer 1

Updated

I guess you just missed the float: none; : float forces display: block;.

Live demo (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 */
}

Anyway this is not because you can do it that you should. There are things like carousels that can achieve this kind of effects.

IMHO a web page is originally meant to be horizontally scrolled whereas JavaScript can do anything.