ブートストラップモバイルメニューをフルスクリーンにする

Question

ブートストラップ（v3）モバイルメニューを画面（100％）に完全に表示させる方法は比較的簡単ですか？

メニューはメニュー内のメニューコンテンツと重なるように見えます（bootstrap.jsのデフォルト動作）。私はちょうどユーザーがモバイルメニューを見ているときに下にあるページをスクロール/見ることを防ぎたい。

Answer 1

代わりにこれを試すことができます。私はそれが全体のページを取り、望ましい結果を達成するメニューを持つよりよく見えると思う。

https://jsfiddle.net/rjx3460f/4/

var mywindow = $('#window'); 
$('#navbar').on('show.bs.collapse', function(x) { 
     mywindow.css({visibility: 'hidden'});; 
     $('body').attr("scroll","no").attr("style", "overflow: hidden"); 
}); 
$('#navbar').on('hide.bs.collapse', function(x) { 
     mywindow.css({visibility: 'visible'}); 
     $('body').attr("scroll","yes").attr("style", ""); 
}); 

一般的な考え方は、ページのスクロールを無効にし、メニューが開いているときに、コンテンツを非表示にすることです。スクロールを無効にするだけでも簡単にできます。物が開くときにメニューの高さを100％に設定します。

ここはメニュー全体を占めています。非常によく似た設定ですが、跳ね上がりがあります。私はあなた自身のオープンな切り替えを作成する必要があるかもしれないと思います。これは不可能ではありませんが、もはや本当はブートストラップではありません。

https://jsfiddle.net/rjx3460f/7/