0

LESS CSS を使用して Bootstrap サイドバーのドロップダウン トグルとドロップダウン メニューの両方にカスタム背景色を使用する方法が見つかりません。純粋な CSS ではすべて正常に動作しますが、LESS を使用すると動作しません。私が達成したいのは次のようなものです：

http://jsfiddle.net/GqVM2/6/

そのビットの私のLESSコードはここにあります：

.navbar-default {
  .navbar-nav {
    > open {
      > a,
      > a:hover,
      > a:focus {
        @media (min-width: @grid-float-breakpoint) {
          background-color: #aaaaaa;
        }
      }
      > .dropdown-menu {
        @media (min-width: @grid-float-breakpoint) {
          background-color: #aaaaaa;
        }
      }
    }
  }
}

上記のコードは、Bootstrap LESS を (私が思うに) オーバーライドする必要があるため、オーバーライドしません。JSFiddle で使用した CSS では問題なく動作します。

私はLESSにはかなり慣れていないので、これがばかげた間違いだったらすみません。生成された CSS を Chrome 開発者ツールで調べると、上記は表示されません (開発には LESS JavaScript パーサーを使用しています)。

ご協力いただきありがとうございます！

4

1 に答える 1

0

まず、セレクターのスペルを間違えました....次のようにするopen必要があります.open。

.navbar-default {
  .navbar-nav {
    > open { // here it's the problem!
      > a,
      > a:hover,
      > a:focus {
        @media (min-width: @grid-float-breakpoint) {
          background-color: #aaaaaa;
        }
      }
      > .dropdown-menu {
        @media (min-width: @grid-float-breakpoint) {
          background-color: #aaaaaa;
        }
      }
    }
  }
}

第二に、Bootstrap をカスタマイズするより良い方法があります。ビルドの外観を簡単に変更できる変数がたくさんあります。ナビゲーションバーのドロップダウンも例外ではありません。

変数@navbar-default-link-active-bgとを変更することでカスタマイズできます@navbar-default-link-active-color。

于 2013-10-07T15:03:56.480 に答える