时间戳

首页 > 解决方案 > Bootstrap 响应式嵌入在 flexbox 中不起作用 - 没有计算高度 - 为什么？

css - Bootstrap 响应式嵌入在 flexbox 中不起作用 - 没有计算高度 - 为什么？

问题描述

所以我在尝试在 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>

在此处输入图像描述

标签： csstwitter-bootstrap

解决方案

经过一番思考，我突然意识到 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>

推荐阅读