Bootstrap响应式嵌入无法在Flexbox中使用-无法计算高度-为什么？

Question

所以尝试在Flexbox中使用Bootstrap响应式嵌入类时遇到问题。

当堆叠在一起时，这些类可以正常工作，但是如果我然后使用flexbox并排放置两个div（一个包含视频，另一个包含文本信息面板），则视频将移至一半宽度（正确） ），但高度仍保持全高，就好像它是全宽一样。

我似乎没有什么改变，那就是使高度保持由弹性盒中宽度变化所决定的比例。

这是响应式嵌入中的错误吗？

<div id="youtube-container">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
    </div>
    <div class="info"></div>
</div>

Answer 1

经过一番思考，我突然意识到BS用来改变长宽比的过程是基于父容器的。

因此，只需在响应div周围输入父div，它就可以正常工作。

<div id="youtube-container">
    <div>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/<?php echo get_post_meta($post->ID, 'youtube', true); ?>"></iframe>
        </div>
    </div>
    <div class="info"></div>
</div>