TW Bootstrap: How to overflow columns

css, twitter-bootstrap

Solution

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.

Problem

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.

Original source