Bootstrap 3 Horizontal scrollable row Website Design

Question

I am trying to make a horizontal scroll web page using bootstrap 3. This is what I have tried so far.

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

I tried with the jquery method which mentioned in this thread but it is not scrolling even after the width has been set to row class, the col-lg classes as displayed here.

I also tried to set height to row class by getting the height of col-lg- height, but still not succeeded.

What I wanted to achieve is:

1. col-lg-, col-md- and col-sm- classes should need to be scrolled with it's respective width content. the number of cols may vary according to the data.
2. In col-xs, there is no change in the default behavior.

http://jsfiddle.net/ravimallya/7kCTD/3/ this is the work place. Can anyone suggest a workaround? css, jquery

Answer 1

Finally, I was able to get what I wanted through a CSS-only method.

@media (min-width:768px) {
  .container{
    width:100%;
  }
  #main-content{
    min-height: 100%;
    height: auto;
  }
  #main-content > .row {
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
  }
  #main-content > .row [class*="col-lg"], #main-content > .row [class*="col-md"], #main-content > .row [class*="col-sm"] {
    float:none;
    display:inline-block;
    white-space:normal;
    vertical-align:top;
  }
}

Added float:none and display:inline-block to col- classes to get it to work.

You can see the working example here. I added niceScroll() to get the perfect look. Edit is here.