Horizontale scrollbare Divs in einer Bootstrap-Zeile

Question

Ich versuche, eine horizontal scrollbare Bootstrap-Zeile zu erstellen. Die Zeile enthält Kundenrezensionen, die in divs eingeschlossen sind. Die Breite jedes Testimonials ist 33.333%.

white-space: nowrap und display: inline-block funktioniert nicht.

Was mache ich falsch?

<div class="row"> 
    <div class="col-lg-12 text-center"> 
     <div class="section-title"> 
      <div class="testimonial_group"> 
       <div class="testimonial">...</div> 
       <div class="testimonial">...</div> 
       <div class="testimonial">...</div> 
       <div class="testimonial">...</div> 
       ... 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Bitte überprüfen Sie. Wollen Sie das erreichen?

CodePen   •   JSFiddle

/* The heart of the matter */ 
 
.testimonial-group > .row { 
 
    overflow-x: auto; 
 
    white-space: nowrap; 
 
} 
 
.testimonial-group > .row > .col-xs-4 { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 

 
/* Decorations */ 
 
.col-xs-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; } 
 
.col-xs-4:nth-child(3n+1) { background: #c69; } 
 
.col-xs-4:nth-child(3n+2) { background: #9c6; } 
 
.col-xs-4:nth-child(3n+3) { background: #69c; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="container testimonial-group"> 
 
    <div class="row text-center"> 
 
    <div class="col-xs-4">1</div><!-- 
 
--><div class="col-xs-4">2</div><!-- 
 
--><div class="col-xs-4">3</div><!-- 
 
--><div class="col-xs-4">4</div><!-- 
 
--><div class="col-xs-4">5</div><!-- 
 
--><div class="col-xs-4">6</div><!-- 
 
--><div class="col-xs-4">7</div><!-- 
 
--><div class="col-xs-4">8</div><!-- 
 
--><div class="col-xs-4">9</div> 
 
    </div> 
 
</div>

Answer 2

Versuchen Sie folgendes:

section-title { 
    width: 100%; 
    overflow-x: scroll(or auto); 
} 

Blick auf the spec here.

Answer 3

setzen diese Zeilen in Ihre CSS-Datei

.section-title { 
    overflow: scroll; 
    overflow-x: scroll; 
    overflow-y:hidden 
} 

das x für die horizontale und y für die vertikale ist, Klassencode in Mutter div gelten, in denen viele divs verschachtelt.