html - Bootstrap 水平滚动的图像行

Question

我试图让一排带有背景图像的 div 像 Netflix 样式列表一样水平滚动我写了这个:

http://jsfiddle.net/o3mxb4x9/

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;
}

但我无法让它水平溢出，因此无法左右滚动。

我正在为我的框架使用 Bootstrap 3。

我已经尝试从另一个堆栈问题中做到这一点，但它对我也不起作用。 ( Bootstrap row with horizontal scroll )

Answer 1

该技术有效，但您必须在您的容器上执行此操作:

.cover-container {
    height: 180px;
    width: 100%;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}

然后，从您的元素中删除 float:

.cover-item {
    display: inline-block;
    ...
}

工作 fiddle :http://jsfiddle.net/abhitalks/o3mxb4x9/1/

.