twitter-bootstrap 水平滚动的 Bootstrap 图像行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27620564/
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 Row of Images that Scroll horizontally
提问by Justin Erswell
I am trying to get a row of divs with background images to scroll horizontally like a Netflix style list I have written this:
我试图让一行带有背景图像的 div 像我写的 Netflix 样式列表一样水平滚动：
CSS:
CSS：
.cover-container
{
height: 180px;
width: 100%;
overflow-x: scroll;
}
.cover-item
{
position: relative;
float: left;
margin: 8px 8px;
box-shadow: 2px 2px 4px #bbb;
border-top-right-radius: 4px;
width: 116px;
height: 158px;
vertical-align: bottom;
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
}
But I cannot get it to overflow horizontally and therefore scroll left and right.
但我无法让它水平溢出，因此左右滚动。
I am using Bootstrap 3 for my framework.
我的框架使用 Bootstrap 3。
I have tried doing this from another stack question but it is not working for me either. (Bootstrap row with horizontal scroll)
我曾尝试从另一个堆栈问题中执行此操作，但它对我也不起作用。（带有水平滚动的引导行）
回答by Abhitalks
The technique works, but you have to do that on your container:
该技术有效，但您必须在容器上执行此操作：
.cover-container {
height: 180px;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}
And, remove floatfrom your items:
并且，float从您的项目中删除：
.cover-item {
display: inline-block;
...
}
Working Fiddle: http://jsfiddle.net/abhitalks/o3mxb4x9/1/
工作小提琴：http: //jsfiddle.net/abhitalks/o3mxb4x9/1/
.
.
