Как сделать горизонтальную прокрутку на сетке сетки бутстрапа?

Question

Я начинаю начинать.

Я хочу сделать горизонтальную прокрутку, когда содержимое переполняет ширину родительского 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; 
}