Bootstrap 3 の Navbar の崩壊を防ぐにはどうすればよいですか?

Bootstrap 3 で Navbar Collapse を無効にする

Bootstrap の Navbar コンポーネントは、便利で応答性の高いナビゲーション システムを提供します。デフォルトでは、モバイルのアクセシビリティを向上させるために、画面サイズが小さい場合はナビゲーションバーが折りたたまれます。ただし、場合によっては、ナビゲーション バーを常に表示したままにするために、この折りたたみ動作を無効にすることもできます。

これを実現する 1 つの方法は、ナビゲーション バーを折りたたむデフォルトの CSS スタイルをオーバーライドすることです。対処する必要がある特定のプロパティは次のとおりです。

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

これらのプロパティをオーバーライドすると、小さな画面でナビゲーションバーが折りたたまれるのを防ぐことができます。

説明:

• .navbar-collapse.collapse: このプロパティは、ナビゲーションバーの折りたたまれた状態をターゲットにし、その表示をブロックに設定して表示を維持します。
• .navbar-nav>li, . navbar-nav: これらのプロパティにより、左側と右側の両方のメニュー項目 (トグル ボタンを含む) が常にインラインで表示されます。
• .navbar-nav.navbar-right:last-child: このプロパティは、タブレット サイズの画面での右側のメニューの最後の要素のスペースに関する小さな問題。
• .navbar-right: このプロパティは、float を right に設定することで、小さな画面で右側のメニューを正しく配置します。

これらの CSS オーバーライドを実装すると、Bootstrap 3 でナビゲーションバーの折りたたみ動作を無効にできます。この手法により、複雑または過剰な CSS ルールを必要とせずに、すべてのビューポート サイズでナビゲーションバーの表示を維持できます。

以上がBootstrap 3 の Navbar の崩壊を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。