Bootstrap 3 の Navbar が折りたたまれないようにする方法は?

Bootstrap 3 で Navbar の折りたたみを防ぐ方法

はじめに

Bootstrap 3 の Navbar メニューには次の機能があります。小さな画面でメニュー項目を折りたたんだり展開したりする便利な方法です。ただし、場合によっては、この折りたたみ動作を無効にして、メニューを常に表示しておきたい場合があります。この記事では、この問題の解決策を提供します。

解決策

ナビゲーションバーが折りたたまれるのを防ぐために、Bootstrap のデフォルトのスタイルをオーバーライドできます。更新する必要がある 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: このプロパティは、右側のメニューを画面の右側に揃えます。

例

これらの CSS 変更をプロジェクトに組み込むと、ナビゲーションバーの折りたたみ動作が無効になります:

<link rel="stylesheet" href="css/custom-styles.css">

/* Custom Navbar Styles */
.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;
}

これらの CSS 変更を実装すると、次のことができます。 Bootstrap 3 でのナビゲーションバーの折りたたみを簡単に防ぎ、すべての画面解像度でメニューを表示できるようにします。

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