bootstrap嵌入式响应无法与css列计数一起使用？

Question

bootstrap嵌入式响应不适用于css column-count。例如：

＆＃13;

＆＃13;

/** 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

结果：

第二个和第三个视频没有显示！

任何想法为什么以及如何解决它？

注意：

这似乎是Chrome上的一个错误。 Firefox很好。

Answer 1

最后，我使用http://masonry.desandro.com/中的jquery插件来修复此错误。忘掉column-count！