Bootstrap 4水平滚动div

Question

我得到了Bootstrap 3的工作,但相同的代码在Bootstrap 4中不起作用.

基本上,我正在尝试为DIV创建一个水平滚动,这是一个工作JSFIDDLE for Bootstrap 3(我不想要):DEMO

Bootstrap 4的相同代码不起作用!这是JSFiddle for Bootstrap 4:https://jsfiddle.net/6kvw2q5h/

HTML

<div class="live__scroll">
  <div class="row text-center">
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    <div class="col-8 live__scroll--box">1</div>
    </div>
</div>

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

我究竟做错了什么？我的智慧结束了.

Answer 1

HTML

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

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

注意:codepen