如何扩展div以覆盖较小屏幕上的视频，并使下拉菜单响应

Question

我正在为我的项目制作一个网站，我遇到了一个问题，我无法弄清楚如何修复它已经几天了。

我使用Bootstrap来制作我的网站。它在大屏幕上工作得很好，但是在手机屏幕上，有一些问题。1)在"电影"部分，当调整两个视频中的一个被下推，但边界不扩展。我想使边界扩展时，屏幕调整大小，但它没有这样做。2)当屏幕调整大小时，下拉菜单的最后一个子菜单与其下面的列表项重叠，而我想在移动版点击"下拉菜单"时将项目Movie向下推

这是链接https://jsfiddle.net/0b3qf2xn/

HTML

        <!-- Content-->
        <div class="col-sm-10 col-sm-push-2 content" id="movie">
            <div class="row" id="movieWrapper">
                <div class="col-sm-5 col-sm-offset-1" id="movie-col">
                    <div class="embed-responsive embed-responsive-4by3">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/uXALot_v3mQ"></iframe>
                    </div>
                </div>
                <div class="col-sm-5" id="movie-col">
                    <div class="embed-responsive embed-responsive-4by3">
                        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/uXALot_v3mQ"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <!-- sidebar area start -->
        <div class="col-sm-2 col-sm-pull-10 sidebar">
            <div class="text-xs-center text-sm-left ">          
                <ul class="nav nav-tabs nav-stacked" role="menu">   
                    <li><a href="index.html" class="btn-main">Home</a></li>
                    <li><a href="about.html">About </i></a></li>
                    <li class="dropdown">
                        <a data-toggle="dropdown">Dropdown</a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
                            <li role="presentation"><a role="menuitem" href="angaria.html">Subitem 01</a></li>
                            <li role="presentation"><a  role="menuitem" href="fujimoto.html">Subitem 02</a></li>
                            <li role="presentation"><a role="menuitem" href="komatsu.html">Subitem 03</a></li>
                        </ul>
                    </li>
                    <li class="movie-button"><a href="movie.html">Movie</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

p/s:我不知道为什么我不能重新创建下拉问题是JSfiddle，即使我已经导入了bootstrap和js文件

Answer 1

违规代码在您的#moviewrapperdiv中。将height:100%行移到height:auto;，然后您可以垂直居中col

https://jsfiddle.net/4mrtr0oh/

Answer 2

尝试在菜单栏中使用Z-index