jquery - Bootstrap 3 水平滚动行网站设计

Question

我正在尝试使用 bootstrap 3 制作水平滚动网页。This是我到目前为止所尝试过的。

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

我尝试使用 this 中提到的 jquery 方法线程，但即使将宽度设置为 row 类，col-lg 类也不会滚动 here .

我还尝试通过获取 col-lg- height 的高度来将高度设置为 row 类，但仍然不是 succeeded .

我想实现的是:

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/这是工作地点。谁能建议解决方法？ CSS, jquery

Answer 1

最后，我能够通过纯 CSS 方法得到我想要的东西。

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

将 float:none 和 display:inline-block 添加到 col- 类以使其正常工作。

您可以查看工作示例 here .我添加了 niceScroll() 以获得完美的外观。编辑是here .