引導行中的水平可滾動div

Question

我正在嘗試使水平滾動引導行成爲可能。該行包含用div包裝的顧客評論。每個見證div的寬度是33.333%。

white-space: nowrap和display: inline-block不起作用。

我在做什麼錯？

<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

請檢查。這是你想要達到的目標嗎？

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

試試這個：

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

看the spec here。

Answer 3

把這幾行CSS文件

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

的x是水平和y是垂直，在許多div的嵌套父DIV應用類代碼。