水平滚动的图像引导行

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

工作小提琴：http://jsfiddle.net/abhitalks/o3mxb4x9/1/