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- 高度的高度来将高度设置为row 类，但仍然不是succeeded。

我想要实现的是：

1. col-lg-、col-md- 和 col-sm- 类应该需要滚动其各自的宽度内容。列数可能因数据而异。
2. 在 col-xs 中，默认行为没有变化。

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。