Question

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

除了一件事，它的工作正常。为了提供更多级别的导航（Bootstrap没有开箱即用），我正在使用Smartmenus，它将一个'open'类应用于当前打开的nav li元素（即当列表项被悬停时。）

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

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

所以我想做的就是将#eeeeee更改为其他内容但我无法在配置工具中看到我可以设置此值的位置。它必须通过'变亮'或'变暗'Less方法设置，因为其中没有任何东西具有#eeeeee的直值，但我无法找到它来自哪里。

我知道我可以轻松地使用一些自定义CSS添加覆盖来执行此操作，但我真的很想在配置工具中执行此操作，以便我可以将配置文件传递给客户端而无需添加自定义一些CSS和他们的警告。

任何人都可以看到配置工具中我可以影响这个值的位置吗？

非常感谢。

Answer 1

下载Bootstrap源代码时，您会发现上述css代码已在less/navs.less

中定义

//打开下拉列表 .open＆gt;一个 { ＆安培;，＆安培;：悬停，＆amp ;:focus { background-color：@ nav-link-hover-bg; border-color：@ link-color; } }

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打开导航锚点背景颜色

1 个答案: