Bootstrap TW: Como estourar colunas
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.