過度の CSS オーバーライドを行わずに Bootstrap 3 で Navbar Collapse を無効にする方法

Bootstrap 3 - 折りたたまずに Navbar を操作する

Bootstrap 3 では、画面サイズが小さい場合、デフォルトで Navbar が折りたたまれ、ユーザーにフレンドリーなインターフェイス。ただし、シナリオによっては、常に静的なナビゲーションバーが必要になる場合があります。この記事では、大規模な CSS オーバーライドに頼らずにナビゲーションバーの折りたたみを無効にする方法について説明します。

折りたたみメカニズムを理解する

ブートストラップのナビゲーションバーの折りたたみは、.navbar-collapse によって制御されます。クラス。デフォルトでは、このクラスは特定のブレークポイント以下のデバイスのメニューの右側部分を非表示にします。代わりにトグル ボタンが表示され、ユーザーはメニューを表示または非表示にすることができます。

簡単な折りたたみの無効化

ナビゲーションバーの折りたたみを無効にするには、デフォルトのスタイルをオーバーライドする必要があります。ブートストラップによって適用されます。調整する必要のある重要な 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;
}

オーバーライドの内訳

1. .navbar-collapse.collapse { display: block! important; }: このオーバーライドにより、.collapse クラスが適用された場合でも、ナビゲーションバーのコンテンツが表示されたままになります。
2. .navbar-nav>li, .navbar-nav { float: left ! important; }: 右側のメニューを左側のメニューと揃えるには、左側の項目をフローティングにする必要があります。
3. .navbar-nav.navbar-right:last-child { margin-right: -15px !重要; }: このプロパティはオプションであり、特定の画面サイズにのみ適用されます。ナビゲーションバーのレイアウトに影響を与えない場合は省略できます。
4. .navbar-right { float: right! important; }: これにより、右側のメニューが右に揃えられ、その内部要素が left-floating プロパティに従います。

結論

適用することによりこれらの CSS オーバーライドを使用すると、Bootstrap 3 でのナビゲーションバーの折りたたみを効果的に無効にすることができます。これにより、デバイスやデバイスに関係なく、静的なナビゲーションバーを維持できます。画面サイズを調整し、アプリケーションに合わせたユーザー エクスペリエンスを提供します。

以上が過度の CSS オーバーライドを行わずに Bootstrap 3 で Navbar Collapse を無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。