Question

我正在使用Twitter的bootstrap v2.3.2剥离Wordpress主题The Bootstrap 2.0.1，我试图找出当导航项时如何更改可见（链接）的下拉文本项的颜色在折叠导航中已单击打开。

我知道如何通过variables.less文件（@navbarText，@ navbarLinkColor，@ navbarLinkColorHover等）更改导航下拉列表项的文本/背景颜色

让我感到困惑的是在以下情况下更改文字项目的颜色：

调整窗口大小，以便折叠响应式导航。
单击导航切换按钮以显示以前隐藏的导航项。
单击菜单链接以显示中的下拉菜单项响应式格式。

这就是我的意思，使用Bootstrap的一个默认示例进行了修改以说明问题：

<!-- NAVBAR -->
<div class="navbar navbar-fixed-top">

<div class="navbar-inner">

<div class="container">

<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>

<a class="brand" href="#">Site Title</a>

<div class="nav-collapse collapse navbar-collapse">

<ul class="nav">

<li class="active"><a href="#">Home</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Fruits <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Strawberries</a></li>
<li><a href="#">Bananas</a></li>
<li><a href="#">Apples</a></li>

</ul>

</li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Vegetables <b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">Celery</a></li>
<li><a href="#">Cabbage</a></li>
<li><a href="#">Cucumbers</a></li>

</ul>

</li>

</ul>


<form class="navbar-search pull-left" action="">
<input type="text" class="search-query span2" placeholder="Search">
</form>

</div><!-- /.nav-collapse -->

</div>

</div><!-- /navbar-inner -->

</div><!-- /navbar -->

<!-- NAVBAR -->

问题是由于浏览器窗口调整大小并且主要类别（水果，蔬菜）已经崩溃，导航已经崩溃时子类别链接（草莓，香蕉，苹果或芹菜，卷心菜，黄瓜）的初始颜色点击显示它们。

我可以在悬停时在响应模式下设置展开下拉项目的背景/文本颜色。

我似乎无法改变的是默认的浅灰色，响应模式中的下拉文本项目最初是。

在常规响应导航和倒置导航中的下拉项目上使用相同的浅灰色文本颜色。它不会改变。

我希望能够将该颜色更改为其他颜色，但我还没有找到解决方案。

感谢您提供的任何帮助。

Answer 1

我认为您的问题是可以理解的，因为您希望更改悬停的背景颜色以及下拉菜单中的活动元素 ......

以最简单的方式，您只需将hover和active的元素调用到单独的文件中，然后使用自定义颜色进行定义...

用于在悬停和活动上定义bg颜色的类如下： -

//For active  states
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus
{ background-color:#f00; //Your Pick }

//For hovering states
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus
{ background-color:#bbb; //Your Pick }

查看我的演示以获取更多参考： - http://jsfiddle.net/y7bev/3/

希望这对你有用...

...谢谢

如何在Wordpress主题Bootstra中的响应式扩展下拉菜单项中更改文本颜色

1 个答案: