부트 스트랩 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; 
} 

? 나는 재치가있다.

Answer 1

나는 당신이 그렇게 추가 .row의 인 flexbox 기능을 제거 할 필요가 있다고 생각 :

.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