bootstrap嵌入響應不能用於css列數？

Question

bootstrap嵌入響應不能與CSS列數一起使用。例如：

/** 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插件來修復這個bug。忘記column-count！