Eu quero ter uma linha onde as colunas serão roláveis ​​horizontalmente:

Como você pode ver, a linha é o bloco externo (com preenchimento). Dentro dele, há colunas onde cada um tem algunsspan* classe comospan3. E como todas as colunas não se encaixam na linha, a barra de rolagem está na parte inferior.

Aqui está o que eu tentei fazer (com css inline) e até agora sem sorte.

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

Mas as colunas acabam de se enrolar quando não conseguem se encaixar na linha. Como posso fazer isso?

Obrigado.