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

Question

我正在为我的元素制作一个网站，我遇到了一个问题，几天来我都不知道如何修复它。

我使用 Bootstrap 制作我的网站。它在大屏幕上运行良好，但在移动屏幕上，存在一些问题。 1)在“电影”部分，当调整两个视频之一的大小时，被按下但边框没有延伸。我想让边框在调整屏幕大小时延伸，但它没有这样做。 2)当屏幕调整大小时，下拉菜单的最后一个子项与它下面的列表项重叠，而我想在移动版本上单击“下拉菜单”时将元素电影向下推。

这是链接 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

违规代码在您的#moviewrapper div 中。删除 height:100% 行到 height:auto; 然后你可以垂直居中 col

https://jsfiddle.net/4mrtr0oh/