Wie macht man horizontale Scroll auf Bootstrap-Grid-System?

Question

Ich bin Bootstrap Anfänger.

Ich möchte horizontale Bildlauf machen, wenn Inhalt Überlauf ihre Eltern div's Breite.

Wenn ich gebe statischen Breitenwert zu Eltern es gut funktionieren ..

aber wenn ich dynamische Breite geben (wie col-xs, col-md) es nicht funktioniert ..

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

Hier ist meine JSFiddle https://jsfiddle.net/m9gauc63/1/

In JSFiddle möchte ich horizontale Bildlaufleiste in rosa Bereich so horizontal angeordnet machen.

vielen Dank!

Answer 1

ich keinen

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

h4 { 
    text-align:center; 
}