embed-responsive 부트 스트랩이 css 열 수와 함께 작동하지 않습니까?

Question

부트 스트랩 embed-responsive가 css column-count에서 작동하지 않습니다. 예를 들어

/** Divide the target element into <number> columns */ 
 
.columns { 
 
    -webkit-column-count: 4; 
 
    -webkit-column-gap: 10px; 
 
    /*-webkit-column-fill: auto;*/ 
 

 
    -moz-column-count: 4; 
 
    -moz-column-gap: 10px; 
 
    /*-moz-column-fill: auto;*/ 
 

 
    column-count: 4; 
 
    column-gap: 15px; 
 
    /*column-fill: auto;*/ 
 
} 
 

 
.video-box { 
 
    border: 1px solid red; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="columns"> 
 
     <div class="video-box"> 
 
      <!-- 16:9 aspect ratio --> 
 
      <div class="embed-responsive embed-responsive-16by9"> 
 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qYv5R_e5hTM" frameborder="0" allowfullscreen></iframe> 
 
      </div> 
 
     </div> 
 

 
     <div class="video-box"> 
 
      <!-- 16:9 aspect ratio --> 
 
      <div class="embed-responsive embed-responsive-16by9"> 
 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/feQ99SuGdsw" frameborder="0" allowfullscreen></iframe> 
 
      </div> 
 
     </div> 
 

 
     <div class="video-box"> 
 
      <!-- 16:9 aspect ratio --> 
 
      <div class="embed-responsive embed-responsive-16by9"> 
 
       <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/r_KEWddTrVc" frameborder="0" allowfullscreen></iframe> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

결과 :

두 번째 및 세 번째 동영상이 표시되지되고!

아이디어가있는 이유는 무엇이며 어떻게 해결할 수 있습니까?

참고 :

크롬에 버그가 보인다. Firefox가 좋습니다.

Answer 1

마지막으로이 버그를 해결하기 위해 http://masonry.desandro.com/의 jquery 플러그인을 사용합니다. column-count을 잊어 버리십시오.