jQuery Bootstrap 3 水平滚动行网站设计
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20332830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 Horizontal scrollable row Website Design
提问by Ravimallya
I am trying to make a horizontal scroll web page using bootstrap 3. Thisis what I have tried so far.
我正在尝试使用引导程序 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;
}
I tried with the jquery method which mentioned in thisthread but it is not scrolling even after the width has been set to rowclass, the col-lgclasses as displayed here.
我尝试使用此线程中提到的 jquery 方法，但即使在将宽度设置为row类后它也不会滚动，col-lg类如显示在此处。
I also tried to set height to rowclass by getting the height of col-lg-height, but still not succeeded.
我也尝试row通过获取 height 的col-lg-高度来设置 height 到class ，但仍然没有成功。
What I wanted to achieve is:
我想要实现的是：
- 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.
- col-lg-、col-md- 和 col-sm- 类应该需要滚动其各自的宽度内容。cols 的数量可能因数据而异。
- 在 col-xs 中，默认行为没有变化。
http://jsfiddle.net/ravimallya/7kCTD/3/this is the work place. Can anyone suggest a workaround? css, jquery
http://jsfiddle.net/ravimallya/7kCTD/3/这是工作场所。任何人都可以提出解决方法吗？css, jquery
回答by Ravimallya
Finally, I was able to get what I wanted through a CSS-only method.
最后，我能够通过仅使用 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:noneand display:inline-blockto col-classes to get it to work.
添加float:none和display:inline-block到col-类以使其工作。
You can see the working example here. I added niceScroll()to get the perfect look. Edit is here.
