我正在尝试使用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方法但是即使在将宽度设置为行类之后它也不滚动,col-lg类显示为here.
我还试图通过获得col-lg-height的高度来设置高度到行类,但仍然不是succeeded.
我想要实现的是：
- 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.
- In col-xs,there is no change in the default behavior.
http://jsfiddle.net/ravimallya/7kCTD/3/这是工作场所.任何人都可以建议解决方法？ css,jquery
解决方法
最后,我能够通过仅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-sm"] {
float:none;
display:inline-block;
white-space:normal;
vertical-align:top;
}
}
