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类{{3 }}。

我还尝试通过获得row高度的高度将高度设置为col-lg-类，但仍然不是here。

我想要实现的目标是：

col-lg-，col-md-和col-sm-类应该与它各自的宽度内容一起滚动。根据数据，cols的数量可能会有所不同。

在col-xs中，默认行为没有变化。

succeeded这是工作场所。任何人都可以建议解决方法？ 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。

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

1 个答案: