Próbuję utworzyć poziomą stronę przewijania za pomocą bootstrap 3.To to co próbowałem do tej pory.

@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;
}

Próbowałem za pomocą metody jquery, o której mowa wto wątek, ale nie przewija się nawet po ustawieniu szerokościrow klasa, thecol-lg klasy wyświetlanetutaj.

Próbowałem też ustawić wysokośćrow klasa uzyskując wysokośćcol-lg- wysokość, ale wciąż nieudało się.

To, co chciałem osiągnąć, to:

Klasy col-lg-, col-md- i col-sm- powinny być przewijane z odpowiednią zawartością szerokości. liczba kolumn może się różnić w zależności od danych.W col-xs nie ma zmiany w domyślnym zachowaniu.

http://jsfiddle.net/ravimallya/7kCTD/3/ to jest miejsce pracy. Czy ktoś może zaproponować obejście? css, jquery