小型デバイスでは Bootstrap ナビゲーションバーが表示されなくなるのはなぜですか?

小型デバイスでブートストラップ ナビゲーション バーが表示されなくなる

ブートストラップ ナビゲーション バーを作成するときに、小型の画面では非表示のナビゲーションやハンバーガー アイコンが表示されない場合があります。これは、デフォルトのナビゲーションバー設定が大きな画面用に設計されているためです。

解決策

この問題を解決するには、ナビゲーションバーに適切なクラスを追加する必要があります。 Bootstrap 5 の場合は、navbar-light クラスまたは navbar-dark クラスを使用します。

<nav>

Bootstrap 4 以前のバージョンの場合は、navbar-default クラスを使用します。次のように、ナビゲーション バーの背景色を設定したり、トグラー アイコンを暗くしたりすることもできます。

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

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

これらの変更を適用すると、ナビゲーション バーはすべての画面サイズで適切に表示されます。

以上が小型デバイスでは Bootstrap ナビゲーションバーが表示されなくなるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。