如何在自舉網格系統上進行水平滾動？

Question

我是Bootstrap初學者。

我想在內容溢出其父div的寬度時進行水平滾動。

如果我給靜態寬度值到父它的工作以及..

但是當我給動態寬度（如COL-XS，COL-MD）它不工作..

[HTML ]

<div class="row"> 
     <div class="col-md-4 col-xs-4" style="background-color:green">other contents</div> 
     <div class="col-md-4 col-xs-4" style="background-color:pink; overflow-x:auto;"> 
      <h4>scrollable horizontal</h4> 
      <div class='content'>something...</div> 
      <div class='content'>something...</div> 
      <div class='content'>something...</div> 
      <div class='content'>something...</div> 
      <div class='content'>something...</div> 
      <div class='content'>something...</div>  
     </div> 
     <div class="col-md-4 col-xs-4" style="background-color:orange;">ohter contents</div> 
    </div> 

[CSS]

.content{ 
    display:inline-block; 
    padding: 0px 5px; 
} 

h4 { 
    text-align:center; 
} 

這裏是我的jsfiddle https://jsfiddle.net/m9gauc63/1/

在JSFiddle中，我想讓水平滾動條在粉紅色的區域，所以 水平排列。

非常感謝！

Answer 1

我一個不sure.Please嘗試

.content{ 
    display:inline-block; 
    padding: 0px 5px; 
    overflow-x: scroll; 
} 

h4 { 
    text-align:center; 
}