ブートストラップ - ナビゲーション バー

デフォルトスタイルのナビゲーションバー

ナビゲーション バーは、アプリまたはウェブサイトのナビゲーション ヘッダーとして機能する応答性の高い基本コンポーネントです。モバイル デバイスでは折りたたまれ (開閉可能)、ビューポートの幅が増加するにつれて徐々に水平方向に拡張されます。

整列ナビゲーション バーのナビゲーション リンクは非推奨になりました。

ナビゲーションバーに含まれる要素がオーバーフローします

Bootstrap は、ナビゲーション バーに配置するスペースの幅がどれくらい必要かを認識しないため、ナビゲーション バーのコンテンツが折り返される (つまり、ナビゲーション バーが 2 行を占める) 状況が発生する可能性があります。解決策は次のとおりです:

1. ナビゲーションバー内のすべての要素が占める幅を減らします。
2. 特定の画面サイズでナビゲーション バー内の一部の要素を非表示にします (Responsive Utility クラスを使用)。
3. ナビゲーションバーの水平配置と折り畳み配置の間の変換をトリガーする最小画面幅の値を変更します。これは、@grid-float-breakpoint 変数を変更するか、関連するメディア クエリ コードを自分で書き換えてブートストラップのデフォルト値をオーバーライドすることで実現できます。

   JavaScriptに依存します

   JavaScript が無効で、ビューポートが狭いためナビゲーション バーが折りたたまれている場合、ナビゲーション バーは開かず、.navbar-collapse 内に含まれるコンテンツは表示されません。

   ビューポートのしきい値を変更して、ナビゲーションバーの配置モードに影響を与えます

   ブラウザのビューポート (ビューポート) の幅が @grid-float-breakpoint 值时，导航条内部的元素变为折叠排列，也就是变现为移动设备展现模式；当浏览器视口（viewport）的宽度大于@grid-float-breakpoint 值时，导航条内部的元素变为水平排列，也就是变现为非移动设备展现模式。通过调整源码中的这个值，就可以控制导航条何时堆叠排列，何时水平排列。默认值是 768px の値より小さい場合、ナビゲーション バー内の要素は折りたたまれます。つまり、ブラウザのビューポート (ビューポート) の幅が小さくなると、モバイル デバイス表示モードに変換されます。

   値より大きいです。ナビゲーション バー内の要素は水平に配置されます。これは、非モバイル デバイスの表示モードです。ソース コードでこの値を調整することで、ナビゲーション バーをいつ積み重ねるか、いつ水平に配置するかを制御できます。デフォルト値は 768px (小さな画面やタブレットの最小値) です。

🎜