Twitter bootstrap 如何在一行中放置2个响应迅速的4by3元素？

我正在尝试使用Bootstrap将两个图表排成一行。每个图表应使用总宽度的1/2，图表的高度应适合保持4×3的纵横比

我尝试过使用以下HTML，但每个图表都将占据整个宽度，并放置在彼此上方：

<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="embed-responsive embed-responsive-4by3">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
            </div>
        </div>
        <div class="col-6">
            <div class="embed-responsive embed-responsive-4by3">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe>
            </div>
        </div>
    </div>
</div>

---

如何实现我想要的布局？

在Bootstrap 3文档中，我似乎找不到任何

嵌入响应的
用法。我认为它是从bootstrap4alpha开始添加的（在Beta版中仍然使用）。运行我的代码，看看这是否是您正在尝试执行的操作


我将我的引导代码升级到4.0.0-beta版，现在它似乎可以工作了。