引導行

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/

。