Quiero tener una fila donde las columnas se puedan desplazar horizontalmente:

Como se puede ver, la fila es el bloque exterior (con relleno). Dentro de ella, hay columnas donde cada una tiene algunasspan* clase comospan3. Y como todas las columnas no caben en la fila, la barra de desplazamiento está en la parte inferior.

Esto es lo que intenté hacer (con css en línea) y hasta ahora no hubo suerte.

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

Pero luego las columnas simplemente se envuelven una vez que no pueden encajar en la fila. ¿Cómo puedo hacer esto?

Gracias.