Poziome przewijane divy w rzędzie bootstrapu

Question

Próbuję utworzyć poziomo przewijany wiersz programu startowego. Wiersz zawiera opinie klientów zapakowane w div. Szerokość każdego świadectwa div wynosi 33.333%.

i display: inline-block nie działa.

Co robię źle?

<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

Proszę sprawdzić. Czy to jest to, co chcesz osiągnąć?

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

Spróbuj tego:

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

Spójrz na the spec here.

Answer 3

umieścić te linie w pliku CSS

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

x jest pozioma i pionowa Y jest zastosować kod klasy w nadrzędnej div w którym wiele div są zagnieżdżone.