自举4个水平滚动条格(Bootstrap 4 horizontal scroller div)

我得到这个工作对引导3，但相同的代码不会在引导4工作。

基本上，我试图创建一个DIV水平滚动和这里的工作的jsfiddle自举3（我不希望）： DEMO

为引导4相同的代码是不是虽然工作！ 下面是对的jsfiddle引导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

Answer 2:

我认为你需要删除的Flexbox的功能.row因此补充：

.live__scroll .row{
  display:block;
}

所以它应该看起来像以下内容：

 .live__scroll { overflow-x: auto; overflow-y: hidden; white-space: nowrap; } .live__scroll .row{ display:block; } .live__scroll .live__scroll--box { display: inline-block; float: none; padding: 15px; border: 1px solid red; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <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> 

文章来源: Bootstrap 4 horizontal scroller div