自定义 Bootstrap 打开导航锚点背景颜色

Question

我正在使用 Bootstrap Customizer 生成一个配置文件，我可以分发给客户，他们可以从中建立他们的网站（使用我的自定义样式）。

除一件事外，一切正常。为了提供额外的导航级别（某些 Bootstrap 没有开箱即用的功能），我使用 Smartmenus 将 'open' 的 class 应用于导航 li 当前打开的元素（即悬停列表项时）。

在定制器输出的未缩小的 Bootstrap css 中有以下规则：

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #337ab7;
}

所以我只想将 #eeeeee 更改为其他内容，但我看不到配置工具中可以设置此值的位置。它必须通过 'lighten' 或 'darken' Less 方法设置，因为其中没有直接值为 #eeeeee 的任何内容，但我无法确定它的来源。

我知道我可以很容易地添加一些自定义覆盖 CSS 来做到这一点，但我真的很想在配置工具中这样做，这样我就可以将配置文件传递给客户无需为他们添加 CSS 的自定义位和警告。

谁能看到我可以在配置工具的哪个位置影响这个值？

非常感谢。

Answer 1

当你下载Bootstrap源代码时你会发现上面的css代码已经定义在less/navs.less

// 打开下拉菜单 .open > a { &, ＆：徘徊，＆：重点 { 背景颜色：@nav-link-hover-bg；边框颜色：@link-颜色； } }

less/variables.less定义@nav-link-hover-bg如下：

@nav-link-hover-bg:                         @gray-lighter;

和：

//## Gray and brand colors for use across Bootstrap.

@gray-base:              #000;
@gray-darker:            lighten(@gray-base, 13.5%); // #222
@gray-dark:              lighten(@gray-base, 20%);   // #333
@gray:                   lighten(@gray-base, 33.5%); // #555
@gray-light:             lighten(@gray-base, 46.7%); // #777
@gray-lighter:           lighten(@gray-base, 93.5%); // #eee

自定义 Bootstrap 打开导航锚点背景颜色

Customise Bootstrap open nav anchor background colour

twitter-bootstrap

twitter-bootstrap-3