响应式Iframes高度与Bootstrap

Question

我正在使用Bootstrap并尝试在3行中堆叠多个iframe。 问题在于iframe会压低下面的iframe，就像它们有底边或类似的东西一样。我正在使用此代码：

<div class="container">

     <div class="row">
                <div class="col-md-12">

                    <div class="proj-container">
                            <div class="embed-responsive embed-responsive-4by3 col-md-4 col-xs-12">
                               <iframe class="embed-responsive-item"src=''></iframe>
                            </div>
                    </div>

                     <div class="proj-container">
                            <div class="embed-responsive embed-responsive-4by3 col-md-4 col-xs-12">
                               <iframe class="embed-responsive-item"src=''></iframe>
                            </div>
                    </div>

                     <div class="proj-container">
                            <div class="embed-responsive embed-responsive-4by3 col-md-4 col-xs-12">
                               <iframe class="embed-responsive-item"src=''></iframe>
                            </div>
                    </div>

                     <div class="proj-container">
                            <div class="embed-responsive embed-responsive-4by3 col-md-4 col-xs-12">
                               <iframe class="embed-responsive-item"src=''></iframe>
                            </div>
                    </div>



                </div>
            </div>

</div>    

我在这个示例中将源保留为空，但我的观点是，iframe实际上对于他们引用的页面的整个内容的高度无形地伸展。

关于如何解决这个问题的任何想法？谢谢！