Bootstrap 3水平可滚动行网站设计

我正在尝试使用bootstrap 3创建一个水平滚动网页。 这是我到目前为止所尝试的。

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

我尝试了在这个线程中提到的jquery方法，但是即使在将宽度设置为row类之后它也不滚动， 这里显示的是col-lg类。

我还尝试通过获取col-lg- height的高度来设置高度到row类，但仍未成功 。

我想要达到的目标是：

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 to col- class以使其工作。

你可以在这里看到工作示例。 我添加了niceScroll()以获得完美的外观。 编辑在这里 。