コンテナーの幅を固定し、最初のグリッド システム層を使用して、Bootstrap の応答性を無効にします。詳細については、ドキュメントを参照してください。
<meta name="viewport" content="width=device-width, initial-scale=1">モバイル デバイスでサイトのズーム機能を無効にするがないことに注意してください。さらに、コンテナの幅をリセットし、ナビゲーション バーが折りたたまれないように変更しました。基本的には問題ありません。
注意点として、navbar コンポーネントは、それを表示するためのスタイルがかなり具体的で詳細であるという点で、ここではかなり注意が必要です。デスクトップ スタイルの表示が必要なほどパフォーマンスが高くなく、洗練されていないことを確認するためのオーバーライド。navbar を使用する場合、この例の上に構築すると、潜在的な問題が発生する可能性があることに注意してください。
レスポンシブでないレイアウトは、固定要素の主な欠点を浮き彫りにします。ビューポートがページ コンテンツよりも狭くなると、固定ナビゲーション バーなどの固定コンポーネントはスクロールできなくなります。つまり、レスポンシブでないコンテナーの幅が 970px で、ビューポートが 800px の場合、170px のコンテンツが非表示になる可能性があります。
これはブラウザのデフォルトの動作であるため、これを回避する方法はありません。唯一の解決策は、レスポンシブ レイアウトを使用するか、固定されていない要素を使用することです。