使用Bootstrap v3.3.7
尝试使用以下页面自定义导航栏颜色: https://getbootstrap.com/docs/3.3/customize/
当导航栏向下折叠时,一切都有效,即:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
折叠后的图标栏显示如下(很好):
但是,当我将鼠标悬停在图标栏上时,它们似乎已经褪色,即:
显然需要调整悬停/活动背景和前景色,但需要更改的神奇LESS变量是什么?
目标是在悬停/点击等过程中保持条纹为白色,背景为蓝色
提前致谢。
答案 0 :(得分:0)
不确定您是否可以通过自定义页面自定义它,但您可以通过css定位和覆盖按钮样式。我相信您必须指定使用哪个导航栏,因此如果您使用的是.navbar-default
,那么您将执行以下操作:
.navbar-default .navbar-toggle:hover{
background:none;
}
答案 1 :(得分:0)
尝试.navbar .navbar-header .navbar-toggle:focus,
.navbar .navbar-header .navbar-toggle:hover {
background-color: transparent;
}
这样的
@Override
public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
clients.inMemory().withClient("client_id").authorizedGrantTypes("password", "client_credentials")
.secret("secret").authorities("Authority1", "Authority2").scopes("READ", "WRITE").resourceIds("resource_server_id");
}
答案 2 :(得分:0)
感谢两位回复的人 - 以下是诀窍:
.navbar-header .navbar-toggle:focus,
.navbar-header .navbar-toggle:hover {
background-color: transparent;
}