我正在尝试使用 bootstrap 3 制作水平滚动网页。This http://fiddle.jshell.net/ravimallya/7kCTD/2/show/是我到目前为止所尝试过的。
@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方法，其中提到this https://stackoverflow.com/questions/19800008/create-horizontally-scrolling-list-item-view-using-bootstrap-columns线程，但即使宽度设置为后它也不会滚动row类，该col-lg显示的类别here http://fiddle.jshell.net/ravimallya/7kCTD/3/show/.
我也尝试将高度设置为row通过获取高度来进行类col-lg-高度，但仍然没有成功了 http://fiddle.jshell.net/ravimallya/7kCTD/4/show/.
我想要实现的是：
- col-lg-、col-md- 和 col-sm- 类应该需要以其各自的宽度内容滚动。列数可能根据数据而变化。
- 在 col-xs 中，默认行为没有变化。
http://jsfiddle.net/ravimalya/7kCTD/3/ 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-md"], #main-content > .row [class*="col-sm"] {
float:none;
display:inline-block;
white-space:normal;
vertical-align:top;
}
}
Added float:none and display:inline-block to col-类以使其发挥作用。
您可以查看工作示例here http://fiddle.jshell.net/ravimallya/7kCTD/9/show/。我添加了niceScroll()以获得完美的外观。编辑是here http://jsfiddle.net/ravimallya/7kCTD/9/.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
