2
私のプロジェクト用のウェブサイトを作っていて、数日間それを修正する方法を見つけられなかったという問題が発生しました。小さな画面でビデオをカバーするようにdivを拡張し、ドロップダウンメニューを反応させるにはどうすればいいですか？
私は自分のウェブサイトを作るためにブートストラップを使いました。しかし、モバイル画面で大画面ではうまく動作しますが、いくつかの問題があります。 1）「ムービー」セクションで、2つのビデオの1つをプッシュダウンしても境界線が伸びない場合は、サイズを変更します。私は、画面のサイズが変更されたときに境界線を延長したいが、そうすることはできない。 2）画面のサイズを変更すると、ドロップダウンメニューの最後の子が下のリスト項目と重なって表示されますが、モバイル版では「ドロップダウンメニュー」をクリックするとムービーが下に移動します。私は、ドロップダウンの問題は、私はすでにブートストラップを輸入していてもJSfiddleで再作成できない理由を私は知らない：ここでは
リンクは
<!-- 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の https://jsfiddle.net/0b3qf2xn/
HTMLですjsファイル。
をセンタリングすることができます、あなたは外部https://jsfiddle.net/link2pk/0b3qf2xn/2/のようなブートストラップJSを含める必要があります。今すぐあなたはそれをCSSに入れました。 jsfiddleのjavascriptボタンからjqueryを選択する必要もあります。 – link2pk
ありがとうございました。 –