11

ブートストラップ 3 でフラット UI テーマを使用しています。フラット UI テーマのナビゲーション バーが正しく機能せず、多くの人が github に投稿されている同様の問題を抱えています。そこで、デフォルトの BS3 ナビゲーション バーを使用し、(別のスタック オーバーフロー スレッドの助けを借りて) 独自のコードを記述して、希望どおりにメニューのスタイルを設定することにしました。私はオーバーライドCSSとしてLESSでこれを行っています。

問題は、以下を変更する方法がわからないことです。

  • ドロップダウンボックスの色
  • ドロップダウン ボックスのリンクの色
  • ドロップダウン ボックス リンク ホバー カラー

私が使用しているcssは次のとおりです。

/* navbar */
.navbar-default {
   font-size: floor(@component-font-size-base * 1.067); // ~16px
   border-radius: @border-radius-large;
   border: none;
   background-color: @brand-primary !important;
}
/* title */
.navbar-default .navbar-brand {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover {
    color: @clouds;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  // Changes color of main button that is currently active.
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  //  Changes color of main menu button once clicked.
}
/* caret */
.navbar-default .navbar-nav > li > a .caret {
    border-top-color: @clouds;
    border-bottom-color: @clouds;
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}

これにより、正しいカラー バー、バー リンク、キャレット、およびバー ホバー効果が生成されます。しかし、サブ メニューのあるボタンをクリックすると、サブ メニューがデフォルトの BS グレーのまま表示されます。ドロップダウン サブメニューの背景色、リンクの色などを変更するために欠落しているクラスは何ですか?

Bootstrap navbar サブメニュー

ありがとう

4

4 に答える 4

16

これは、ドロップダウン メニューのスタイル/色を変更する CSS です。

  .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

デモ: http://bootply.com/93475

于 2013-11-11T17:41:43.760 に答える
4

これも追加します：

.navbar-default .dropdown-menu {
     background-color: #3344ff;
     color:#ffffff;
}

スケリーが彼の応答で言ったことに加えて：

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
}

これは、後者がドロップダウンが開いているときにのみ背景色を変更するためですが、元に戻すと、背景色がデフォルトに戻ります。ドロップダウンを切り替えるだけではこれを確認することはできませんが、たとえば以下の jQuery を使用してホバーするなどして、ドロップダウンの遷移を遅らせれば、私の言いたいことがわかります。

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

上記の CSS を使用したjsFiddleトグル ドロップダウンとホバー ドロップダウンを比較できます。どちらも機能します。

上記の CSS を使用しないjsFiddle 。トグル ドロップダウンは機能しているように見えますが、ホバーしてマウスを離すと元に戻ります。

于 2014-09-05T10:02:14.657 に答える
2

FireFox または Chrome を使用している場合、開発者ツールを使用して、ドロップダウン ボックスに適用されている CSS を確認できますか?

たとえば、Chrome で行うことは、ドロップダウン ボックスの背景を右クリックして [要素の検査] を選択することです。次に、正しい要素が選択されていることを確認します。次に、右側のパネルでその要素にどの CSS スタイルが適用されているかを確認できるはずです (私のバージョンの Chrome 30.0.1599.101 m では、スタイル、計算済み、イベント リスナー、DOM ブレークポイント、およびプロパティのタブがあります)。

于 2013-11-11T16:36:12.647 に答える
0

BS3 メニュー ジェネレーターを使用して、必要な CSS コードを作成しました。変更が必要なタグを探すよりもはるかに簡単でした。

于 2013-11-11T17:18:11.850 に答える