Bootstrap Navbar: 小型デバイスでロゴとメニュー項目が消えるのはなぜですか?

ブートストラップ ナビゲーションバー: 小型デバイスで消える要素に対処する

中央のロゴとメニュー項目を備えたブートストラップ ナビゲーションバーを設計する場合、次のことを確認することが重要です。デバイス間で最適な表示を実現します。ただし、小さな画面では、ロゴやハンバーガー メニューを含むすべての要素が消えるという問題が発生する可能性があります。

この消える行為の根本的な理由は、多くの場合、navbar に適用される navbar-default クラスに関連しています。ブートストラップの以前のバージョン。すぐには分からないかもしれませんが、このクラスは背景色の設定とハンバーガー アイコンの表示に不可欠です。

解決策 1: Bootstrap 5 と Modern Bootstrap

Bootstrap 5 および最新のバージョンでは、navbar-default クラスが置き換えられました。ハンバーガー アイコンを表示するには、navbar-light クラスまたは navbar-dark クラスを navbar 要素に追加する必要があります。例:

<nav>

解決策 2: 背景色の追加 (Bootstrap 4 以前)

Bootstrap 4 以前を使用している場合は、次のように解決できます。 navbar-nav 要素に背景色を追加することで問題を解決します。

#navbar-primary .navbar-nav {
   background: #ededed;
}

解決策 3: トグラーを暗くする (Bootstrap 4 以前)

別のオプションBootstrap 4 以前では、.icon-bar クラスを変更してトグラー アイコンを暗くします。

.navbar-toggle .icon-bar {
    background-color: rgb(136, 136, 136);
}

Bootstrap 3 に関する追加メモ:

Bootstrap 3 の場合、メニュー項目を適切に配置するには、navbar-default クラスを含める必要があります。

これらのソリューションのいずれかを実装すると、デバイスに関係なく、ブートストラップ ナビゲーション バーがすべての画面サイズで意図したとおりに表示されるようになります。使用済み。

以上がBootstrap Navbar: 小型デバイスでロゴとメニュー項目が消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。