Bootstrap 3 で Navbar の折りたたみを防ぐには?

Bootstrap 3 でのナビゲーションバーの折りたたみの防止

Bootstrap 3 では、スペースを節約するために、小さな画面ではナビゲーションバーを折りたたむことができます。これは多くの場合に便利ですが、この動作を無効にしてナビゲーション バーを常に表示しておきたい場合は、次の方法があります。

CSS のカスタマイズ

するにはナビゲーションバーの折りたたみを防ぐには、いくつかのデフォルトの 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 は、折りたたまれた要素を非表示にするデフォルトの display プロパティをオーバーライドします。代わりに、表示を ブロック に設定して、表示できるようにします。
• .navbar-nav>li, .navbar-nav は、左側のメニュー項目を強制的に表示します。 float left.
• .navbar-nav.navbar-right:last-child は、右端のメニュー項目に微妙なマージン調整を与えます。
• .navbar-right は、右側のメニューが右にフロートするようにします。

実装

これらの変更を実装するには、次のようにします。提供された CSS をスタイルシートに追加します。あるいは、スタイルを HTML コードに直接インライン化することもできます。

説明

これらの CSS プロパティは連携して、すべての画面サイズでナビゲーションバー要素を表示できるようにします。

• .navbar-collapse.collapse プロパティは、折りたたみ機能をオーバーライドします。
• .navbar-nav>li、.navbar-nav および.navbar-right 右側のメニューが左側のメニューと正しく位置合わせされていることを確認します。

以上がBootstrap 3 で Navbar の折りたたみを防ぐには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。