Eu estou tentando fazer uma página web de rolagem horizontal usando o bootstrap 3.este é o que eu tentei até agora.

@media (min-width:768px) {
.container {
width:100%;
}
#main-content{
     min-height: 100%;
    height: auto; 

}
#main-content > .row {
 overflow-x:scroll;
     overflow-y:hidden;
}    
#main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:left;
}

Eu tentei com o método jquery que mencionou emisto thread, mas não está rolando mesmo depois que a largura foi definida pararow classe, ocol-lg classes como exibidasAqui.

Eu também tentei definir a altura pararow classe, obtendo a altura decol-lg- altura, mas ainda nãoconseguiu.

O que eu queria alcançar é:

As classes col-lg-, col-md- e col-sm devem ser roladas com o respectivo conteúdo de largura. o número de cols pode variar de acordo com os dados.Em col-xs, não há mudança no comportamento padrão.

http://jsfiddle.net/ravimallya/7kCTD/3/ este é o local de trabalho. Alguém pode sugerir uma solução alternativa? css, jquery