Boostrap媒體列表，如何讓項目水平滾動？

Question

我使用引導程序並在側欄中創建了媒體列表。

<aside class="col-md-4"> 
    <div class="content"> 
     <ul class="media-list"> 
      <li class="media"> 
      <li class="media"> 
      <li class="media"> 

上中/大屏幕，我得到一個列，其佔據了頁面的三分之一，此列中的媒體項目在彼此的頂部位置。

在一個小型設備上，該列現在是屏幕的100％寬度，並且媒體項目的行爲方式相同。

但是我想要做的是保持媒體項目100％，但讓他們並排位置，以便用戶必須水平滾動以查看下一個項目。

我已經試過

.media { float:left; display:inline } 

不同的變化會得到媒體項目肩並肩顯示，但他們將不會顯示在屏幕的100％，並且不會熄滅屏幕，所以當一個到達終點頁面中的下一個項目將顯示在下面，而不是在視圖端口之外。

所以我怎麼可能例如，任何幫助

Answer 1

.media-list { 
overflow-x: scroll; 
overflow-y: hidden; 
white-space: nowrap; } 

.media { 
display: inline-block; 
vertical-align: middle; 
width: 100%; } 

這個作品集

.media {width:100%; float:left;} 
.media-list {width: auto; overflow-x: scroll} 

感謝。