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很陌生，所以如果这只是一个愚蠢的错误，请原谅。当我在 Chrome 开发者工具中检查生成的 CSS 时，上面的内容甚至没有出现（我正在使用 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 回答