小型デバイスでブートストラップ Navbar ロゴとハンバーガー メニューを表示するにはどうすればよいですか?

ブートストラップ ナビゲーション バー: 小さいデバイスでの要素の表示

この質問は、ロゴ画像のあるブートストラップ ナビゲーション バーが小さい画面で消える問題を解決します。 、ロゴとハンバーガー メニューの表示が妨げられています。

解決策は、デバイス間で適切な表示を確保するために、Bootstrap によって提供される適切なユーティリティ クラスを使用します。

Bootstrap 5:

Bootstrap 5 の場合、「navbar-light」またはハンバーガーアイコンの表示には「navbar-dark」クラスが必要です。これらのクラスの 1 つをナビゲーション バーに追加するだけで、ハンバーガーが表示されます。

Bootstrap 4 以前:

Bootstrap 4 以前を使用している場合バージョンに応じて、次の解決策のいずれかを使用できます:

• 背景を追加するcolor: 背景色プロパティを指定しなくてもナビゲーション バーに背景色を割り当てます。
• トグラーを暗くします: トグラー アイコンの背景色を変更します。 - コントラストを向上させ、より目立つようにするためのバー。

コードスニペット:

背景色:

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

暗いトグラー:

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

ブートストラップ 4.0.0更新:

Bootstrap 4.0.0 では、「navbar-default」クラスは非推奨になりました。代わりに、明るい色のナビゲーションバーには「navbar-light bg-light」を、暗い色のナビゲーションバーには「navbar-dark bg-dark」を使用してください。

以上が小型デバイスでブートストラップ Navbar ロゴとハンバーガー メニューを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。