ブートストラップ4横スクロールのdivの

Question

私はブートストラップ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; 
} 

私が間違って何をしているのですか？私は知恵の終わりです。私はあなたがそう.rowのフレキシボックスの機能を削除する必要があると思う

Answer 1

追加：

.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> 
 
\t </div> 
 
</div>

Answer 2

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