bootstrap 图片横向滚动条_Bootstrap 4水平滚动条div

I got this working for Bootstrap 3 but the same code won't work in Bootstrap 4.

Basically, I'm trying to create a horizontal scroll for DIV and here's a working JSFIDDLE for Bootstrap 3 (which I don't want): DEMO

The same code for Bootstrap 4 isn't working though! Here's the JSFiddle for Bootstrap 4: https://jsfiddle.net/6kvw2q5h/

HTML

1

1

1

1

1

1

1

CSS

.live__scroll {

overflow-x: auto;

overflow-y: hidden;

white-space: nowrap;

}

.live__scroll .live__scroll--box {

display: inline-block;

float: none;

padding: 15px;

border: 1px solid red;

}

What am I doing wrong? I'm at wits end.

解决方案

HTML

1

2

3

4

5

6

7

8

9

CSS

/* The heart of the matter */

.testimonial-group > .row {

overflow-x: auto;

white-space: nowrap;

}

.testimonial-group > .row > .col-sm-4 {

display: inline-block;

float: none;

}

/* Decorations */

.col-sm-4 { color: #fff; font-size: 48px; padding-bottom: 20px; padding-top: 18px; }

.col-sm-4:nth-child(3n+1) { background: #c69; }

.col-sm-4:nth-child(3n+2) { background: #9c6; }

.col-sm-4:nth-child(3n+3) { background: #69c; }